/* all colors */
:root {
    --white: #ffffff;

    --black-900: #01011b;
    --black-800: #45455c;
    --black-700: #7d7d91;
    --black-600: #acacbe;
    --black-500: #c1c1d4;
    --black-400: #dadae8;
    --black-300: #e8e8f3;
    --black-200: #f1f1f9;
    --black-100: #f4f4f9;
    --black-50: #f9f9fc;

    --violet-900: #3600c4;
    --violet-800: #5300cb;
    --violet-700: #6200d1;
    --violet-600: #7b10db;
    --violet-500: #7b04df;
    --violet-400: #9242e5;
    --violet-300: #a768ea;
    --violet-200: #c096f0;
    --violet-100: #d9c1f5;
    --violet-50: #f1e6fb;

    --blue-900: #012070;
    --blue-800: #012d88;
    --blue-700: #0340a9;
    --blue-600: #0456ca;
    --blue-500: #0670eb;
    --blue-400: #419bf3;
    --blue-300: #67b8f9;
    --blue-200: #9ad5fd;
    --blue-100: #ccecfe;
    --blue-50: #e3f2fe;

    --green-900: #005800;
    --green-800: #027602;
    --green-700: #188711;
    --green-600: #27981e;
    --green-500: #32a727;
    --green-400: #54b44b;
    --green-300: #74c16b;
    --green-200: #9dd296;
    --green-100: #c3e3bf;
    --green-50: #e6f4e5;

    --yellow-900: #fc7600;
    --yellow-800: #fea200;
    --yellow-700: #febc00;
    --yellow-600: #ffd500;
    --yellow-500: #ffd400;
    --yellow-400: #feea3f;
    --yellow-300: #ffef67;
    --yellow-200: #fff394;
    --yellow-100: #fff8bf;
    --yellow-50: #fffde5;

    --orange-900: #cd5915;
    --orange-800: #d86f18;
    --orange-700: #df7d1c;
    --orange-600: #e58b1f;
    --orange-500: #e99623;
    --orange-400: #eca537;
    --orange-300: #efb456;
    --orange-200: #f3ca85;
    --orange-100: #f8deb5;
    --orange-50: #fcf2e1;

    --red-900: #de0404;
    --red-800: #f62513;
    --red-700: #ff3018;
    --red-600: #ff391f;
    --red-500: #ff4023;
    --red-400: #ff6444;
    --red-300: #ff8466;
    --red-200: #ffa992;
    --red-100: #ffcbbd;
    --red-50: #ffe9e8;
}

/* button violet */
:root {
    /* violet */
    --pds-button-violet-background: var(--violet-500);
    --pds-button-violet-border: var(--violet-500);
    --pds-button-violet-color: var(--white);
    --pds-button-violet-background-hover: var(--violet-700);
    --pds-button-violet-border-hover: var(--violet-700);
    --pds-button-violet-color-hover: var(--white);
    --pds-button-violet-background-active: var(--violet-700);
    --pds-button-violet-border-active: var(--violet-700);
    --pds-button-violet-color-active: var(--white);
    --pds-button-violet-background-focus: var(--violet-700);
    --pds-button-violet-border-focus: var(--violet-700);
    --pds-button-violet-color-focus: var(--white);
    --pds-button-violet-background-disabled: var(--pds-button-violet-background);
    --pds-button-violet-border-disabled: var(--pds-button-violet-border);
    --pds-button-violet-color-disabled: var(--pds-button-violet-color);

    /* violet-second */
    --pds-button-violet-second-background: var(--white);
    --pds-button-violet-second-border: var(--violet-500);
    --pds-button-violet-second-color: var(--violet-500);
    --pds-button-violet-second-background-hover: var(--violet-50);
    --pds-button-violet-second-border-hover: var(--violet-500);
    --pds-button-violet-second-color-hover: var(--violet-500);
    --pds-button-violet-second-background-active: var(--violet-50);
    --pds-button-violet-second-border-active: var(--violet-500);
    --pds-button-violet-second-color-active: var(--violet-500);
    --pds-button-violet-second-background-focus: var(--violet-50);
    --pds-button-violet-second-border-focus: var(--violet-500);
    --pds-button-violet-second-color-focus: var(--violet-500);
    --pds-button-violet-second-background-disabled: var(--pds-button-violet-second-background);
    --pds-button-violet-second-border-disabled: var(--pds-button-violet-second-border);
    --pds-button-violet-second-color-disabled: var(--pds-button-violet-second-color);

    /* violet-transparent */
    --pds-button-violet-transparent-background: transparent;
    --pds-button-violet-transparent-border: var(--violet-500);
    --pds-button-violet-transparent-color: var(--violet-500);
    --pds-button-violet-transparent-background-hover: rgba(123, 4, 223, 0.1);
    --pds-button-violet-transparent-border-hover: var(--violet-500);
    --pds-button-violet-transparent-color-hover: var(--violet-500);
    --pds-button-violet-transparent-background-active: rgba(123, 4, 223, 0.1);
    --pds-button-violet-transparent-border-active: var(--violet-500);
    --pds-button-violet-transparent-color-active: var(--violet-500);
    --pds-button-violet-transparent-background-focus: rgba(123, 4, 223, 0.1);
    --pds-button-violet-transparent-border-focus: var(--violet-500);
    --pds-button-violet-transparent-color-focus: var(--violet-500);
    --pds-button-violet-transparent-background-disabled: var(--pds-button-violet-transparent-background);
    --pds-button-violet-transparent-border-disabled: var(--pds-button-violet-transparent-border);
    --pds-button-violet-transparent-color-disabled: var(--pds-button-violet-transparent-color);

    /* violet-inherit */
    --pds-button-violet-inherit-background: transparent;
    --pds-button-violet-inherit-border: transparent;
    --pds-button-violet-inherit-color: var(--violet-500);
    --pds-button-violet-inherit-background-hover: rgba(123, 4, 223, 0.1);
    --pds-button-violet-inherit-border-hover: transparent;
    --pds-button-violet-inherit-color-hover: var(--violet-500);
    --pds-button-violet-inherit-background-active: rgba(123, 4, 223, 0.1);
    --pds-button-violet-inherit-border-active: transparent;
    --pds-button-violet-inherit-color-active: var(--violet-500);
    --pds-button-violet-inherit-background-focus: rgba(123, 4, 223, 0.1);
    --pds-button-violet-inherit-border-focus: transparent;
    --pds-button-violet-inherit-color-focus: var(--violet-500);
    --pds-button-violet-inherit-background-disabled: var(--pds-button-violet-inherit-background);
    --pds-button-violet-inherit-border-disabled: var(--pds-button-violet-inherit-border);
    --pds-button-violet-inherit-color-disabled: var(--pds-button-violet-inherit-color);
}

/* button white */
:root {
    /* white */
    --pds-button-white-background: var(--white);
    --pds-button-white-border: var(--black-400);
    --pds-button-white-color: var(--black-900);
    --pds-button-white-background-hover: var(--black-50);
    --pds-button-white-border-hover: var(--black-600);
    --pds-button-white-color-hover: var(--black-900);
    --pds-button-white-background-active: var(--black-200);
    --pds-button-white-border-active: var(--black-700);
    --pds-button-white-color-active: var(--black-900);
    --pds-button-white-background-focus: var(--black-50);
    --pds-button-white-border-focus: var(--black-600);
    --pds-button-white-color-focus: var(--black-900);
    --pds-button-white-background-disabled: var(--pds-button-white-background);
    --pds-button-white-border-disabled: var(--pds-button-white-border);
    --pds-button-white-color-disabled: var(--pds-button-white-color);

    /* white-second */
    --pds-button-white-second-background: var(--white);
    --pds-button-white-second-border: var(--black-400);
    --pds-button-white-second-color: var(--black-900);
    --pds-button-white-second-background-hover: var(--black-300);
    --pds-button-white-second-border-hover: var(--black-400);
    --pds-button-white-second-color-hover: var(--black-900);
    --pds-button-white-second-background-active: var(--black-400);
    --pds-button-white-second-border-active: var(--black-500);
    --pds-button-white-second-color-active: var(--black-900);
    --pds-button-white-second-background-focus: var(--black-300);
    --pds-button-white-second-border-focus: var(--black-400);
    --pds-button-white-second-color-focus: var(--black-900);
    --pds-button-white-second-background-disabled: var(--pds-button-white-second-background);
    --pds-button-white-second-border-disabled: var(--pds-button-white-second-border);
    --pds-button-white-second-color-disabled: var(--pds-button-white-second-color);

    /* white-transparent */
    --pds-button-white-transparent-background: transparent;
    --pds-button-white-transparent-border: var(--pds-button-white-second-border);
    --pds-button-white-transparent-color: var(--pds-button-white-second-color);
    --pds-button-white-transparent-background-hover: var(--pds-button-white-second-background-hover);
    --pds-button-white-transparent-border-hover: var(--pds-button-white-second-border-hover);
    --pds-button-white-transparent-color-hover: var(--pds-button-white-second-color-hover);
    --pds-button-white-transparent-background-active: var(--pds-button-white-second-background-active);
    --pds-button-white-transparent-border-active: var(--pds-button-white-second-border-active);
    --pds-button-white-transparent-color-active: var(--pds-button-white-second-color-active);
    --pds-button-white-transparent-background-focus: var(--pds-button-white-second-background-focus);
    --pds-button-white-transparent-border-focus: var(--pds-button-white-second-border-focus);
    --pds-button-white-transparent-color-focus: var(--pds-button-white-second-color-focus);
    --pds-button-white-transparent-background-disabled: var(--pds-button-white-transparent-background);
    --pds-button-white-transparent-border-disabled: var(--pds-button-white-transparent-border);
    --pds-button-white-transparent-color-disabled: var(--pds-button-white-transparent-color);

    /* white-inherit */
    --pds-button-white-inherit-background: rgba(255, 255, 255, 0);
    --pds-button-white-inherit-border: transparent;
    --pds-button-white-inherit-color: rgba(255, 255, 255, 1);
    --pds-button-white-inherit-background-hover: rgba(255, 255, 255, 0.2);
    --pds-button-white-inherit-border-hover: transparent;
    --pds-button-white-inherit-color-hover: rgba(255, 255, 255, 1);
    --pds-button-white-inherit-background-active: rgba(255, 255, 255, 0.3);
    --pds-button-white-inherit-border-active: transparent;
    --pds-button-white-inherit-color-active: rgba(255, 255, 255, 1);
    --pds-button-white-inherit-background-focus: rgba(255, 255, 255, 0.2);
    --pds-button-white-inherit-border-focus: transparent;
    --pds-button-white-inherit-color-focus: rgba(255, 255, 255, 1);
    --pds-button-white-inherit-background-disabled: var(--pds-button-white-inherit-background);
    --pds-button-white-inherit-border-disabled: var(--pds-button-white-inherit-border);
    --pds-button-white-inherit-color-disabled: var(--pds-button-white-inherit-color);
}

/* button yellow */
:root {
    /* yellow */
    --pds-button-yellow-background: var(--yellow-500);
    --pds-button-yellow-border: var(--yellow-500);
    --pds-button-yellow-color: var(--black-900);
    --pds-button-yellow-background-hover: var(--yellow-700);
    --pds-button-yellow-border-hover: var(--yellow-700);
    --pds-button-yellow-color-hover: var(--black-900);
    --pds-button-yellow-background-active: var(--yellow-700);
    --pds-button-yellow-border-active: var(--yellow-700);
    --pds-button-yellow-color-active: var(--black-900);
    --pds-button-yellow-background-focus: var(--yellow-700);
    --pds-button-yellow-border-focus: var(--yellow-700);
    --pds-button-yellow-color-focus: var(--black-900);
    --pds-button-yellow-background-disabled: var(--pds-button-yellow-background);
    --pds-button-yellow-border-disabled: var(--pds-button-yellow-border);
    --pds-button-yellow-color-disabled: var(--pds-button-yellow-color);

    /* yellow-second */
    --pds-button-yellow-second-background: var(--white);
    --pds-button-yellow-second-border: var(--yellow-500);
    --pds-button-yellow-second-color: var(--black-900);
    --pds-button-yellow-second-background-hover: var(--yellow-50);
    --pds-button-yellow-second-border-hover: var(--yellow-500);
    --pds-button-yellow-second-color-hover: var(--black-900);
    --pds-button-yellow-second-background-active: var(--yellow-50);
    --pds-button-yellow-second-border-active: var(--yellow-500);
    --pds-button-yellow-second-color-active: var(--black-900);
    --pds-button-yellow-second-background-focus: var(--yellow-50);
    --pds-button-yellow-second-border-focus: var(--yellow-500);
    --pds-button-yellow-second-color-focus: var(--black-900);
    --pds-button-yellow-second-background-disabled: var(--pds-button-yellow-second-background);
    --pds-button-yellow-second-border-disabled: var(--pds-button-yellow-second-border);
    --pds-button-yellow-second-color-disabled: var(--pds-button-yellow-second-color);

    /* yellow-transparent */
    --pds-button-yellow-transparent-background: transparent;
    --pds-button-yellow-transparent-border: var(--yellow-500);
    --pds-button-yellow-transparent-color: var(--black-900);
    --pds-button-yellow-transparent-background-hover: rgba(255, 212, 0, 0.12);
    --pds-button-yellow-transparent-border-hover: var(--yellow-500);
    --pds-button-yellow-transparent-color-hover: var(--black-900);
    --pds-button-yellow-transparent-background-active: rgba(255, 212, 0, 0.12);
    --pds-button-yellow-transparent-border-active: var(--yellow-500);
    --pds-button-yellow-transparent-color-active: var(--black-900);
    --pds-button-yellow-transparent-background-focus: rgba(255, 212, 0, 0.12);
    --pds-button-yellow-transparent-border-focus: var(--yellow-500);
    --pds-button-yellow-transparent-color-focus: var(--black-900);
    --pds-button-yellow-transparent-background-disabled: var(--pds-button-yellow-transparent-background);
    --pds-button-yellow-transparent-border-disabled: var(--pds-button-yellow-transparent-border);
    --pds-button-yellow-transparent-color-disabled: var(--pds-button-yellow-transparent-color);

    /* yellow-inherit */
    --pds-button-yellow-inherit-background: transparent;
    --pds-button-yellow-inherit-border: transparent;
    --pds-button-yellow-inherit-color: var(--yellow-500);
    --pds-button-yellow-inherit-background-hover: rgba(255, 212, 0, 0.12);
    --pds-button-yellow-inherit-border-hover: transparent;
    --pds-button-yellow-inherit-color-hover: var(--yellow-500);
    --pds-button-yellow-inherit-background-active: rgba(255, 212, 0, 0.12);
    --pds-button-yellow-inherit-border-active: transparent;
    --pds-button-yellow-inherit-color-active: var(--yellow-500);
    --pds-button-yellow-inherit-background-focus: rgba(255, 212, 0, 0.12);
    --pds-button-yellow-inherit-border-focus: transparent;
    --pds-button-yellow-inherit-color-focus: var(--yellow-500);
    --pds-button-yellow-inherit-background-disabled: var(--pds-button-yellow-inherit-background);
    --pds-button-yellow-inherit-border-disabled: var(--pds-button-yellow-inherit-border);
    --pds-button-yellow-inherit-color-disabled: var(--pds-button-yellow-inherit-color);
}

/* button black */
:root {
    /* black */
    --pds-button-black-background: var(--black-900);
    --pds-button-black-border: var(--black-900);
    --pds-button-black-color: var(--white);
    --pds-button-black-background-hover: var(--black-800);
    --pds-button-black-border-hover: var(--black-800);
    --pds-button-black-color-hover: var(--white);
    --pds-button-black-background-active: var(--black-900);
    --pds-button-black-border-active: var(--black-900);
    --pds-button-black-color-active: var(--white);
    --pds-button-black-background-focus: var(--black-800);
    --pds-button-black-border-focus: var(--black-900);
    --pds-button-black-color-focus: var(--white);
    --pds-button-black-background-disabled: var(--pds-button-black-background);
    --pds-button-black-border-disabled: var(--pds-button-black-border);
    --pds-button-black-color-disabled: var(--pds-button-black-color);

    /* black-second */
    --pds-button-black-second-background: var(--white);
    --pds-button-black-second-border: var(--black-500);
    --pds-button-black-second-color: var(--black-900);
    --pds-button-black-second-background-hover: var(--black-100);
    --pds-button-black-second-border-hover: var(--black-600);
    --pds-button-black-second-color-hover: var(--black-900);
    --pds-button-black-second-background-active: var(--black-300);
    --pds-button-black-second-border-active: var(--black-700);
    --pds-button-black-second-color-active: var(--black-900);
    --pds-button-black-second-background-focus: var(--black-500);
    --pds-button-black-second-border-focus: var(--black-600);
    --pds-button-black-second-color-focus: var(--black-900);
    --pds-button-black-second-background-disabled: var(--pds-button-black-second-background);
    --pds-button-black-second-border-disabled: var(--pds-button-black-second-border);
    --pds-button-black-second-color-disabled: var(--pds-button-black-second-color);

    /* black-transparent */
    --pds-button-black-transparent-background: transparent;
    --pds-button-black-transparent-border: var(--pds-button-black-second-border);
    --pds-button-black-transparent-color: var(--pds-button-black-second-color);
    --pds-button-black-transparent-background-hover: var(--pds-button-black-second-background-hover);
    --pds-button-black-transparent-border-hover: var(--pds-button-black-second-border-hover);
    --pds-button-black-transparent-color-hover: var(--pds-button-black-second-color-hover);
    --pds-button-black-transparent-background-active: var(--pds-button-black-second-background-active);
    --pds-button-black-transparent-border-active: var(--pds-button-black-second-border-active);
    --pds-button-black-transparent-color-active: var(--pds-button-black-second-color-active);
    --pds-button-black-transparent-background-focus: var(--pds-button-black-second-background-focus);
    --pds-button-black-transparent-border-focus: var(--pds-button-black-second-border-focus);
    --pds-button-black-transparent-color-focus: var(--pds-button-black-second-color-focus);
    --pds-button-black-transparent-background-disabled: var(--pds-button-black-transparent-background);
    --pds-button-black-transparent-border-disabled: var(--pds-button-black-transparent-border);
    --pds-button-black-transparent-color-disabled: var(--pds-button-black-transparent-color);

    /* black-inherit */
    --pds-button-black-inherit-background: rgba(1, 1, 27, 0);
    --pds-button-black-inherit-border: transparent;
    --pds-button-black-inherit-color: var(--black-900);
    --pds-button-black-inherit-background-hover: rgba(1, 1, 27, 0.05);
    --pds-button-black-inherit-border-hover: transparent;
    --pds-button-black-inherit-color-hover: var(--black-900);
    --pds-button-black-inherit-background-active: rgba(1, 1, 27, 0.15);
    --pds-button-black-inherit-border-active: transparent;
    --pds-button-black-inherit-color-active: var(--black-900);
    --pds-button-black-inherit-background-focus: rgba(1, 1, 27, 0.05);
    --pds-button-black-inherit-border-focus: transparent;
    --pds-button-black-inherit-color-focus: var(--black-900);
    --pds-button-black-inherit-background-disabled: var(--pds-button-black-inherit-background);
    --pds-button-black-inherit-border-disabled: var(--pds-button-black-inherit-border);
    --pds-button-black-inherit-color-disabled: var(--pds-button-black-inherit-color);
}

/* button gray */
:root {
    /* gray */
    --pds-button-gray-background: var(--black-300);
    --pds-button-gray-border: var(--black-300);
    --pds-button-gray-color: var(--black-900);
    --pds-button-gray-background-hover: var(--black-400);
    --pds-button-gray-border-hover: var(--black-400);
    --pds-button-gray-color-hover: var(--black-900);
    --pds-button-gray-background-active: var(--black-400);
    --pds-button-gray-border-active: var(--black-400);
    --pds-button-gray-color-active: var(--black-900);
    --pds-button-gray-background-focus: var(--black-400);
    --pds-button-gray-border-focus: var(--black-400);
    --pds-button-gray-color-focus: var(--black-900);
    --pds-button-gray-background-disabled: var(--pds-button-gray-background);
    --pds-button-gray-border-disabled: var(--pds-button-gray-border);
    --pds-button-gray-color-disabled: var(--pds-button-gray-color);

    /* gray-second */
    --pds-button-gray-second-background: var(--white);
    --pds-button-gray-second-border: var(--black-500);
    --pds-button-gray-second-color: var(--black-900);
    --pds-button-gray-second-background-hover: var(--black-300);
    --pds-button-gray-second-border-hover: var(--black-500);
    --pds-button-gray-second-color-hover: var(--black-900);
    --pds-button-gray-second-background-active: var(--black-300);
    --pds-button-gray-second-border-active: var(--black-500);
    --pds-button-gray-second-color-active: var(--black-900);
    --pds-button-gray-second-background-focus: var(--black-300);
    --pds-button-gray-second-border-focus: var(--black-500);
    --pds-button-gray-second-color-focus: var(--black-900);
    --pds-button-gray-second-background-disabled: var(--pds-button-gray-second-background);
    --pds-button-gray-second-border-disabled: var(--pds-button-gray-second-border);
    --pds-button-gray-second-color-disabled: var(--pds-button-gray-second-color);

    /* gray-transparent */
    --pds-button-gray-transparent-background: transparent;
    --pds-button-gray-transparent-border: var(--black-500);
    --pds-button-gray-transparent-color: var(--black-900);
    --pds-button-gray-transparent-background-hover: rgba(125, 125, 145, 0.12);
    --pds-button-gray-transparent-border-hover: var(--black-500);
    --pds-button-gray-transparent-color-hover: var(--black-900);
    --pds-button-gray-transparent-background-active: rgba(125, 125, 145, 0.12);
    --pds-button-gray-transparent-border-active: var(--black-500);
    --pds-button-gray-transparent-color-active: var(--black-900);
    --pds-button-gray-transparent-background-focus: rgba(125, 125, 145, 0.12);
    --pds-button-gray-transparent-border-focus: var(--black-500);
    --pds-button-gray-transparent-color-focus: var(--black-900);
    --pds-button-gray-transparent-background-disabled: var(--pds-button-gray-transparent-background);
    --pds-button-gray-transparent-border-disabled: var(--pds-button-gray-transparent-border);
    --pds-button-gray-transparent-color-disabled: var(--pds-button-gray-transparent-color);

    /* gray-inherit */
    --pds-button-gray-inherit-background: transparent;
    --pds-button-gray-inherit-border: transparent;
    --pds-button-gray-inherit-color: var(--black-900);
    --pds-button-gray-inherit-background-hover: rgba(125, 125, 145, 0.12);
    --pds-button-gray-inherit-border-hover: transparent;
    --pds-button-gray-inherit-color-hover: var(--black-900);
    --pds-button-gray-inherit-background-active: rgba(125, 125, 145, 0.12);
    --pds-button-gray-inherit-border-active: transparent;
    --pds-button-gray-inherit-color-active: var(--black-900);
    --pds-button-gray-inherit-background-focus: rgba(125, 125, 145, 0.12);
    --pds-button-gray-inherit-border-focus: transparent;
    --pds-button-gray-inherit-color-focus: var(--black-900);
    --pds-button-gray-inherit-background-disabled: var(--pds-button-gray-inherit-background);
    --pds-button-gray-inherit-border-disabled: var(--pds-button-gray-inherit-border);
    --pds-button-gray-inherit-color-disabled: var(--pds-button-gray-inherit-color);
}
