﻿
/* ###################################################################### */
/* ############################  SCROLLBARS  ############################ */
/* ###################################################################### */

[color-theme='pd-light'] .pd-scrollable::-webkit-scrollbar-thumb {
    background-color: var(--pd-turquoise-700);
    border: 1px solid var(--pd-blank);
}

[color-theme='pd-light'] .pd-scrollable::-webkit-scrollbar-track {
    background-color: var(--pd-blank);
}

/* ###################################################################### */
/* ##############################  BUTTON  ############################## */
/* ###################################################################### */

[color-theme='pd-light'] .pd-button-primary {
    background-color: var(--pd-turquoise);
    color: var(--pd-blank);
    box-shadow: none;
}

    [color-theme='pd-light'] .pd-button-primary:hover {
        background-color: var(--pd-turquoise-700);
    }

    [color-theme='pd-light'] .pd-button-primary:disabled {
        background-color: var(--pd-turquoise-300);
    }

    [color-theme='pd-light'] .pd-button-primary:focus {
        box-shadow: 0 0 0 1px var(--pd-blank), 0 0 0 3px var(--pd-turquoise-700);
    }

    [color-theme='pd-light'] .pd-button-primary:not(:disabled):active {
        background-color: var(--pd-turquoise-900);
    }

[color-theme='pd-light'] .pd-button-primary-outline {
    background-color: var(--pd-blank);
    color: var(--pd-turquoise-700);
    border: 1px solid var(--pd-turquoise-700);
    box-shadow: none;
}

    [color-theme='pd-light'] .pd-button-primary-outline:hover {
        background-color: var(--pd-turquoise-700);
        color: var(--pd-blank);
        border-color: var(--pd-turquoise-700);
        box-shadow: none;
    }

    [color-theme='pd-light'] .pd-button-primary-outline:disabled {
        background-color: var(--pd-blank);
        color: var(--pd-turquoise-300);
        border: 1px solid var(--pd-turquoise-300);
    }

    [color-theme='pd-light'] .pd-button-primary-outline:focus {
        border: 1px solid var(--pd-turquoise-700);
        box-shadow: 0 0 0 1px var(--pd-blank), 0 0 0 3px var(--pd-turquoise-700);
    }

    [color-theme='pd-light'] .pd-button-primary-outline:not(:disabled):active {
        background-color: var(--pd-turquoise-900);
        border-color: var(--pd-turquoise-900);
    }

[color-theme='pd-light'] .pd-button-secondary {
    background-color: var(--pd-grey);
    color: var(--pd-blank);
    border: none;
    box-shadow: none;
}

    [color-theme='pd-light'] .pd-button-secondary:hover {
        background-color: var(--pd-grey-700);
    }

    [color-theme='pd-light'] .pd-button-secondary:disabled {
        background-color: var(--pd-grey-100);
    }

    [color-theme='pd-light'] .pd-button-secondary:focus {
        box-shadow: 0 0 0 1px var(--pd-blank), 0 0 0 3px var(--pd-turquoise-700);
    }

    [color-theme='pd-light'] .pd-button-secondary:not(:disabled):active {
        background-color: var(--pd-grey-900);
    }

[color-theme='pd-light'] .pd-button-secondary-outline {
    background-color: var(--pd-blank);
    color: var(--pd-text-dark);
    border: 1px solid var(--pd-grey-100);
    box-shadow: none;
}

    [color-theme='pd-light'] .pd-button-secondary-outline:hover {
        background-color: var(--pd-grey-100);
        color: var(--pd-text-dark);
        box-shadow: none;
    }

    [color-theme='pd-light'] .pd-button-secondary-outline:disabled {
        background-color: var(--pd-blank);
        color: var(--pd-grey-100);
    }

    [color-theme='pd-light'] .pd-button-secondary-outline:focus {
        border: 1px solid var(--pd-grey-100);
        box-shadow: 0 0 0 1px var(--pd-blank), 0 0 0 3px var(--pd-turquoise-700);
    }

    [color-theme='pd-light'] .pd-button-secondary-outline:not(:disabled):active {
        background-color: var(--pd-grey-500);
        border: 1px solid var(--pd-grey-500);
    }

[color-theme='pd-light'] .pd-button-header {
    background-color: var(--pd-green);
    color: var(--pd-blank);
    border: none;
    box-shadow: none;
}

    [color-theme='pd-light'] .pd-button-header:hover {
        background-color: var(--pd-green-700);
    }

    [color-theme='pd-light'] .pd-button-header:disabled {
        background-color: var(--pd-green-100);
    }

    [color-theme='pd-light'] .pd-button-header:focus {
        box-shadow: 0 0 0 1px var(--pd-blank), 0 0 0 3px var(--pd-turquoise-700);
    }

    [color-theme='pd-light'] .pd-button-header:not(:disabled):active {
        background-color: var(--pd-green-900);
    }

[color-theme='pd-light'] .pd-button-info {
    background-color: var(--pd-orange);
    color: var(--pd-blank);
    border: none;
    box-shadow: none;
}

    [color-theme='pd-light'] .pd-button-info:hover {
        background-color: var(--pd-orange-700);
    }

    [color-theme='pd-light'] .pd-button-info:disabled {
        background-color: var(--pd-orange-100);
    }

    [color-theme='pd-light'] .pd-button-info:focus {
        box-shadow: 0 0 0 1px var(--pd-blank), 0 0 0 3px var(--pd-turquoise-700);
    }

    [color-theme='pd-light'] .pd-button-info:not(:disabled):active {
        background-color: var(--pd-orange-900);
    }

/* ###################################################################### */
/* ##############################  HEADER  ############################## */
/* ###################################################################### */

[color-theme='pd-light'] .pd-header {
    background-color: var(--pd-blank);
}

[color-theme='pd-light'] .pd-header-divider {
    background-color: var(--pd-grey-900);
}

[color-theme='pd-light'] .pd-header-links > a {
    color: var(--pd-text-dark);
}

    [color-theme='pd-light'] .pd-header-links > a:hover {
        color: var(--pd-turquoise-700);
    }

/* ###################################################################### */
/* ###########################  PAGES HEADER  ########################### */
/* ###################################################################### */

[color-theme='pd-light'] .pd-page-header {
    color: var(--pd-blank);
}

/* ###################################################################### */
/* ############################  CONTAINERS  ############################ */
/* ###################################################################### */

[color-theme='pd-light'] .pd-container {
    background-color: var(--pd-blank);
}

[color-theme='pd-light'] .pd-container-caption {
    color: var(--pd-blank);
    background-color: var(--pd-turquoise);
}

[color-theme='pd-light'] .pd-container-tab {
    color: var(--pd-blank);
    background-color: var(--pd-grey);
}

    [color-theme='pd-light'] .pd-container-tab:hover {
        background-color: var(--pd-grey-700);
    }

    [color-theme='pd-light'] .pd-container-tab[active] {
        color: var(--pd-turquoise);
        background-color: var(--pd-blank);
    }

/* ###################################################################### */
/* ##############################  TOGGLE  ############################## */
/* ###################################################################### */
[color-theme='pd-light'] .pd-toggle-on + label .pd-toggle-button {
    background-color: var(--pd-turquoise-700);
}

[color-theme='pd-light'] .pd-toggle-on + label .pd-toggle-slider {
    border-color: var(--pd-turquoise-700);
}

[color-theme='pd-light'] .pd-toggle-on:hover + label .pd-toggle-button {
    background-color: var(--pd-turquoise-900);
}

[color-theme='pd-light'] .pd-toggle-on:hover + label .pd-toggle-slider {
    border-color: var(--pd-turquoise-900);
}

[color-theme='pd-light'] .pd-toggle-off + label .pd-toggle-button {
    background-color: var(--pd-grey);
}

[color-theme='pd-light'] .pd-toggle-off + label .pd-toggle-slider {
    border-color: var(--pd-grey);
}

[color-theme='pd-light'] .pd-toggle-off:hover + label .pd-toggle-button {
    background-color: var(--pd-grey-700);
}

[color-theme='pd-light'] .pd-toggle-off:hover + label .pd-toggle-slider {
    border-color: var(--pd-grey-700);
}

[color-theme='pd-light'] .pd-toggle-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--pd-turquoise-light);
}

[color-theme='pd-light'] .pd-toggle-button:active {
    background-color: var(--pd-turquoise-dark);
}

[color-theme='pd-light'] .pd-toggle-button:active > .pd-toggle-slider {
    border-color: var(--pd-turquoise-dark);
}

[color-theme='pd-light'] .pd-toggle-button-disabled {
    opacity: 0.155;
}

[color-theme='pd-light'] .pd-toggle-slider {
    background-color: var(--pd-blank);
}

[color-theme='pd-light'] .pd-toggle-text {
    color: var(--pd-text-dark);
}

/* ###################################################################### */
/* #############################  CHECKBOX  ############################# */
/* ###################################################################### */

[color-theme='pd-light'] .pd-checkbox > input:disabled ~ * {
    opacity: 0.555;
}

[color-theme='pd-light'] .pd-checkbox > label {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--pd-grey-300);
}

[color-theme='pd-light'] .pd-checkbox-icon {
    color: var(--pd-blank);
    background-color: var(--pd-turquoise-700);
}

    [color-theme='pd-light'] .pd-checkbox > input:not(:disabled) + label > .pd-checkbox-icon:hover {
        background-color: var(--pd-turquoise-900);
    }

    [color-theme='pd-light'] .pd-checkbox > input:not(:disabled) + label:focus {
        box-shadow: 0 0 0 2px var(--pd-turquoise-light);
    }

/* ###################################################################### */
/* ############################  TEXT INPUT  ############################ */
/* ###################################################################### */

[color-theme='pd-light'] .pd-input-wrapper {
    border: 1px solid;
    border-color: var(--pd-grey-500);
}

    [color-theme='pd-light'] .pd-input-wrapper > button {
        border: none;
        border-left: inherit;
        color: var(--pd-grey-900);
    }

[color-theme='pd-light'] .pd-input-wrapper-invalid {
    border-color: var(--pd-maroon);
    box-shadow: inset 0 0 0 1px var(--pd-maroon);
}

    [color-theme='pd-light']
    .pd-input-wrapper-invalid > button {
        border: 1px solid var(--pd-maroon);
        border-left: 2px solid var(--pd-maroon);
    }

[color-theme='pd-light'] .pd-input-value-wrapper:has(.pd-input-value > input:disabled) {
    color: var(--pd-grey-500);
    background-color: var(--pd-grey-100);
}

[color-theme='pd-light'] .pd-input-value:has(input:disabled) + .pd-input-remark {
    color: var(--pd-grey-500);
}

[color-theme='pd-light'] .pd-input-remark {
    color: var(--pd-grey);
}

[color-theme='pd-light'] .pd-input-icon > i {
    color: var(--pd-grey-700);
}

[color-theme='pd-light'] .pd-input-text {
    color: var(--pd-grey);
}

[color-theme='pd-light'] .pd-input-value > input::placeholder {
    color: var(--pd-grey-500);
}

[color-theme='pd-light'] .pd-input-value:has(input:disabled) > input::placeholder {
    color: var(--pd-grey-100);
}

/* ###################################################################### */
/* ##############################  SELECT  ############################## */
/* ###################################################################### */

[color-theme='pd-light'] .pd-select-wrapper {
    border: 1px solid;
    border-color: var(--pd-grey-500);
}

    [color-theme='pd-light'] .pd-select-wrapper > button {
        border: none;
        border-left: inherit;
        color: var(--pd-grey-900);
    }

[color-theme='pd-light'] .pd-select-wrapper-invalid {
    border-color: var(--pd-maroon);
    box-shadow: inset 0 0 0 1px var(--pd-maroon);
}

    [color-theme='pd-light']
    .pd-select-wrapper-invalid > button {
        border: 1px solid var(--pd-maroon);
    }

    [color-theme='pd-light']
    .pd-select-wrapper-invalid > .pd-select-button > button:not(:focus) {
        border: 1px solid var(--pd-maroon);
        border-left: 2px solid var(--pd-maroon);
    }

[color-theme='pd-light'] .pd-select-button {
    border-color: var(--pd-grey-500);
}

    [color-theme='pd-light'] .pd-select-value-wrapper:has(.pd-select-value > input:disabled) {
        color: var(--pd-grey-500);
        background-color: var(--pd-grey-100);
    }

[color-theme='pd-light'] .pd-select-value:has(input:disabled) + .pd-select-remark {
    color: var(--pd-grey-500);
}

[color-theme='pd-light'] .pd-select-remark {
    color: var(--pd-grey);
}

[color-theme='pd-light'] .pd-select-icon > i {
    color: var(--pd-grey-700);
}

[color-theme='pd-light'] .pd-select-text {
    color: var(--pd-grey);
}

[color-theme='pd-light'] .pd-select-dropdown {
    border: 1px solid var(--pd-turquoise-700);
}

[color-theme='pd-light'] .pd-select-option:hover {
    background-color: var(--pd-turquoise-light);
}

[color-theme='pd-light'] .pd-select-value > input::placeholder {
    color: var(--pd-grey-500);
}

[color-theme='pd-light'] .pd-select-value:has(input:disabled) > input::placeholder {
    color: var(--pd-grey-100);
}

/* ###################################################################### */
/* #############################  TOOLTIPS  ############################# */
/* ###################################################################### */

[color-theme='pd-light'] .pd-tooltip > span {
    color: var(--pd-blank);
    background-color: var(--pd-text-dark);
}

[color-theme='pd-light'] .pd-tooltip-arrow-top::before {
    border-bottom-color: var(--pd-text-dark);
}

[color-theme='pd-light'] .pd-tooltip-arrow-top-right::before {
    border-bottom-color: var(--pd-text-dark);
}

[color-theme='pd-light'] .pd-tooltip-arrow-bottom::before {
    border-top-color: var(--pd-text-dark);
}

[color-theme='pd-light'] .pd-tooltip-arrow-left::before {
    border-right-color: var(--pd-text-dark);
}

[color-theme='pd-light'] .pd-tooltip-arrow-right::before {
    border-left-color: var(--pd-text-dark);
}