:root {
    --smart-body-background-color: var(--smart-base-800);
    --smart-outline-color: var(--smart-primary);
    --smart-text-title-color: var(--smart-base-50);
    --smart-text-color: var(--smart-base-50);
    --smart-text-secondary-color: var(--smart-base-100);
    --smart-text-tertiary-color: var(--smart-base-200);
    --smart-text-disabled-color: var(--smart-base-300);
    --smart-text-contrast-color: var(--smart-white);

    --smart-base-background-color: var(--smart-base-700);
    --smart-base-background-color-dark: var(--smart-base-900);

    --smart-border-normal: var(--smart-base-200);
    --smart-border-hover: var(--smart-base-100);
    --smart-border-focus: var(--smart-primary);
    --smart-border-disabled: var(--smart-base-300);

    --smart-input-border: var(--smart-base-400);
    --smart-input-border-block-end: var(--smart-base-200);
    --smart-input-hover-background: var(--smart-base-600);
    --smart-input-hover-border: var(--smart-base-300);
    --smart-input-hover-border-block-end: var(--smart-base-100);
    --smart-input-focus-background: var(--smart-base-background-color);
    --smart-input-focus-border: var(--smart-base-400);
    --smart-input-focus-border-block-end: var(--smart-border-focus);

    --smart-elevation-0: none;
    --smart-elevation-1: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28);
    --smart-elevation-2: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28);
    --smart-elevation-3: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28);
    --smart-elevation-4: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
    --smart-elevation-5: 0 0 8px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.28);
    --smart-elevation-6: 0 0 8px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28);
    --smart-elevation-7: 0 0 16px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28);
    --smart-elevation-8: 0 0 24px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28);
    --smart-elevation-9: 0 0 32px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28);
    --smart-elevation-10: 0 0 40px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28);

    --smart-grid-column-header-height: 32px;
    --smart-font-size: 13px;
}

body[theme="dark"],
.smart-ui-component[theme="dark"] {
    --smart-primary: #{$primary};
    --smart-primary-rgb: #{$primary-rgb};
    --smart-on-primary: #{$on-primary};
    --smart-surface: var(--smart-base-background-color);
    --smart-border: var(--smart-base-500);
    --smart-secondary-color: var(--smart-on-secondary);
    --smart-background: var(--smart-body-background-color);
    --smart-background-color: var(--smart-text-color);
    --smart-outline: var(--smart-primary);
    --smart-secondary-background: var(--smart-base-100);
    --smart-secondary-background-alt: var(--smart-base-800);
    --smart-warning-color: var(--smart-on-warning);
    --smart-error-color: var(--smart-on-error);
    --smart-success-color: var(--smart-on-success);
    --smart-info-color: var(--smart-on-info);
    --smart-primary-color: var(--smart-on-primary);
    --smart-input-font-size: var(--smart-body-font-size);
    --smart-ui-state-hover: var(--smart-base-400);
    --smart-ui-state-color-hover: var(--smart-white);
    --smart-ui-state-border-hover: var(--smart-ui-state-hover);
    --smart-ui-state-focus: var(--smart-base-400);
    --smart-ui-state-color-focus: var(--smart-on-surface);
    --smart-ui-state-border-focus: var(--smart-surface);

    --smart-ui-state-active: var(--smart-primary);
    --smart-ui-state-color-active: var(--smart-on-primary);
    --smart-ui-state-border-active: var(--smart-primary);
    --smart-ui-state-selected: var(--smart-base-400);
    --smart-ui-state-color-selected: var(--smart-on-secondary-lighter);
    --smart-ui-state-border-selected: var(--smart-base-400);

    --smart-ui-state-secondary-hover: var(--smart-base-500);
    --smart-ui-state-color-secondary-hover: var(--smart-background-color);
    --smart-ui-state-border-secondary-hover: var(--smart-border-hover);
    --smart-grid-column-header-height: 30px;
    --smart-grid-row-height: 26px;

    --smart-scheduler-day-week-view-hour-color: var(--smart-base-500);
    --smart-scheduler-view-horizontal-line-color: var(--smart-base-500);
    --smart-scheduler-view-vertical-line-color: var(--smart-base-500);



}

smart-grid {
    --smart-grid-border: var(--smart-base-400);
    --smart-border: var(--smart-base-400);
}

smart-grid smart-grid-column {
    border-color: var(--smart-base-400);
    color: var(--smart-base-50);
}

.smart-input-overlay.smart-input-overlay-column {
    display: none !important;
}

smart-grid-column[selected]:not(.smart-grid-column-border) {
    color: var(--smart-white);
}


smart-grid smart-grid-cell {
    border-color: var(--smart-base-500);
}

smart-grid smart-grid-cell[selected] {
    --smart-ui-state-border-selected: var(--smart-primary);
}

smart-grid-row[selected] {
    smart-grid-cell[header][freeze] {
        div[data-field="_rowHeaderColumn"] {
            border-right: 2px solid var(--smart-primary);
            color: var(--smart-white);
        }
    }

    smart-grid-cell[header]:not(.smart-grid-column-border):not(:last-child):after {
        background: var(--smart-primary) !important;
    }
}

smart-input.smart-grid-cell-editor,
smart-text-box.smart-grid-cell-editor,
smart-numeric-text-box.smart-grid-cell-editor {
    border-color: var(--smart-primary);
    box-shadow: inset 0 0 0 1px var(--smart-primary);
}

.smart-grid-status-bar,
.smart-grid-pager {
    background: var(--smart-base-700);
    border-top: 1px solid var(--smart-base-500);
}


.smart-tabs {
    --smart-tab-item-padding: 8px 16px;

    .smart-tab-label-container {
        border-radius: 0 !important;
        border: 1px solid transparent !important;

        &[hover] {
            color: var(--smart-primary);
        }

        &[selected] {
            background-color: var(--smart-base-800) !important;
            border-color: var(--smart-base-400) !important;
            border-bottom-color: var(--smart-base-800) !important;
            color: var(--smart-primary-color);
        }
    }
}

.smart-grid-tooltip {
    --smart-secondary: var(--smart-base-900) !important;
}

smart-grid {
    --smart-secondary: var(--smart-secondary-darker);

    smart-grid-cell {
        --smart-ui-state-selected: rgba(var(--smart-primary-rgb), .1);
        --smart-ui-state-color-selected: var(--smart-white);
        --smart-ui-state-border-selected: rgba(var(--smart-primary-rgb), .1);
    }

    smart-grid-column {
        &[selected] {
            background: var(--smart-base-dark);
        }
    }

    smart-grid-column[selected]:not(.smart-grid-column-border):not([data-field="_checkBoxColumn"]):after {
        height: 2px;
        background: var(--smart-primary);
    }

}

smart-calendar {
    .smart-calendar-week-title {
        color: var(--smart-base-200);
    }
}

.smart-button-group .smart-button-group-items .smart-button-group-item {
    padding: 6px;
}

smart-check-box,
smart-radio-button {
    &.smart-toggle-box {
        --smart-font-size: var(--smart-input-font-size);
        --smart-border-width: 2px;
        --smart-border-radius: var(--smart-border-radius-0);
        --smart-check-box-default-size: 14px;
        --smart-radio-button-default-size: 14px;
        --smart-border: var(--smart-base-500);

        .smart-input {
            &:hover {
                --smart-ui-state-hover: var(--smart-ui-state-secondary-hover);
                --smart-ui-state-color-hover: var(--smart-ui-state-color-secondary-hover);
                --smart-ui-state-border-hover: var(--smart-ui-state-border-secondary-hover);
            }
        }
    }
}

smart-list-box {
    --smart-check-box-default-size: 14px;
    --smart-radio-button-default-size: 14px;

    &[selection-mode=checkBox]:focus smart-list-item[focus][selected] .smart-input:before,
    .smart-list-box[selection-mode=checkBox][focus] smart-list-item[focus][selected] .smart-input:before,
    .smart-list-box[selection-mode=radioButton]:focus smart-list-item[focus][selected] .smart-input:before,
    .smart-list-box[selection-mode=radioButton][focus] smart-list-item[focus][selected] .smart-input:before {
        opacity: 0 !important;
    }

    &.smart-list-box input[role="searchbox"] {
        border-bottom-color: var(--smart-base-500);
        outline: none;

        &:hover {
            background: var(--smart-base-600);
            box-shadow: 0 1px 0 0 var(--smart-primary);
            outline: none;
        }

        &:active,
        &:focus {
            border-color: var(--smart-border);
            border-bottom-color: var(--smart-primary);
            outline: none;
            background: var(--smart-base-700);
            box-shadow: 0 1px 0 0 var(--smart-primary);
        }
    }

    smart-list-item .smart-input:before {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    &:not([selection-mode="checkBox"]),
    &:not([selection-mode="radioButton"]) {
        smart-list-item[selected]:not([display-mode="checkBox"]) {
            .smart-overlay {
                &:after {
                    content: "";
                    position: absolute;
                    inset-block-start: .5rem;
                    inset-block-end: .5rem;
                    inset-inline-start: .125rem;
                    width: .1875rem;
                    border-radius: calc(4 * var(--smart-border-radius));
                    background-color: var(--smart-primary);
                }
            }
        }
    }
}

.smart-tree .smart-tree-item-label-element>span {
    padding: 7px 10px;

}

.smart-toggle-box:focus .smart-overlay,
.smart-toggle-box[focus] .smart-overlay {
    opacity: 0 !important;
}

.smart-ripple {
    visibility: hidden !important;
    opacity: 0 !important;
}

input.smart-input {
    border-color: var(--smart-input-border);
    border-bottom-color: var(--smart-input-border-block-end);
    background: var(--smart-background);

    &:hover {
        background: var(--smart-input-hover-background);
        border-bottom-color: var(--smart-input-hover-border-block-end);
    }

    &:active,
    &:focus {
        box-shadow: 0 1px 0 0 var(--smart-primary);
        background: var(--smart-input-focus-background);
        border-bottom-color: var(--smart-input-focus-border-block-end);
    }
}

smart-date-time-picker:not(.outlined),
smart-date-input:not(.outlined),
smart-time-input:not(.outlined),
smart-date-range-input:not(.outlined),
smart-drop-down-button:not(.outlined),
smart-drop-down-list:not(.outlined),
smart-combo-box:not(.outlined),
smart-number-input:not(.outlined),
smart-numeric-text-box:not(.outlined),
smart-multi-input:not(.outlined),
smart-check-input:not(.outlined),
smart-multi-combo-input:not(.outlined),
smart-input:not(.outlined),
smart-text-box:not(.outlined),
smart-color-input:not(.outlined),
smart-color-picker:not(.outlined),
smart-masked-text-box:not(.outlined),
smart-password-text-box:not(.outlined),
smart-password-input:not(.outlined),
smart-text-area:not(.outlined) {
    border-bottom-color: var(--smart-input-border-block-end);
    --smart-surface: var(--smart-background);

    input.smart-input {
        border-bottom-color: var(--smart-input-border-block-end);
    }

    &[hover] {
        --smart-border: var(--smart-input-hover-border);
        --smart-background: var(--smart-input-hover-background);
        border-bottom-color: var(--smart-input-hover-border-block-end);

        input.smart-input {
            border-bottom-color: var(--smart-input-hover-border-block-end);
        }
    }

    &[active],
    &[focus] {
        --smart-background: var(--smart-input-focus-background);

        input.smart-input {
            box-shadow: none;
        }
    }
}

smart-tree:not(.outlined),
smart-menu:not(.outlined),
.smart-form-input:not(.outlined) {
    --smart-font-size: var(--smart-input-font-size);
    --smart-numeric-text-box-default-height: 28px;
    --smart-editor-height: 28px;
    --smart-text-box-default-height: 28px;
    --smart-list-item-height: 28px;
    --smart-ui-state-hover: var(--smart-input-hover-background);
    --smart-ui-state-color-hover: var(--smart-text-color);
    --smart-ui-state-border-hover: var(--smart-input-hover-border);

    &[hover]:not(.smart-drop-down):not(.smart-tree):not(.smart-menu):not(.smart-list-box) {
        --smart-background: var(--smart-input-hover-background);
        --smart-border: var(--smart-input-hover-border);

        .smart-action-button,
        .smart-drop-down-button {
            border-bottom-color: var(--smart-input-hover-border-block-end) !important;
        }


    }

    &[focus]:not(.smart-drop-down):not(.smart-tree):not(.smart-menu):not(.smart-list-box),
    &[active]:not(.smart-drop-down):not(.smart-tree):not(.smart-menu):not(.smart-list-box) {

        .smart-action-button,
        .smart-drop-down-button {
            border-bottom-color: var(--smart-input-focus-border-block-end) !important;
        }


    }

    .smart-drop-down {
        --smart-border: var(--smart-base);
    }

    smart-menu-item[hover],
    smart-tree-item[hover],
    smart-tree-item:hover,
    smart-tree-items-group:hover,
    smart-list-item[hover] {
        --smart-ui-state-border-hover: var(--smart-ui-state-hover) !important;
    }

    &.smart-input[focus]:not(.underlined) {
        box-shadow: 0 1px 0 0 var(--smart-primary);
    }

    &.smart-numeric-text-box[focus],
    &.smart-text-box[focus] {
        border-radius: var(--smart-border-radius);
        box-shadow: 0 1px 0 0 var(--smart-primary);
    }

    .smart-drop-down {
        smart-list-box[focus] {
            box-shadow: none;
        }
    }

    &[focus],
    &[opened],
    &[active] {
        --smart-outline: var(--smart-border);
        --smart-ui-state-active: var(--smart-input-focus-background) !important;
        --smart-ui-state-color-active: var(--smart-background-color) !important;
        --smart-ui-state-border-active: var(--smart-input-focus-border) !important;

        &:not(.smart-list-box) {
            border-color: var(--smart-input-border) !important;
            border-bottom-color: var(--smart-input-focus-border-block-end) !important;
        }

        .smart-buttons-container {
            overflow: visible !important;
        }

        &.smart-date-time-picker {
            border-width: 1px;
            border-bottom-width: 1px !important;
            box-shadow: 0 1px 0 0 var(--smart-primary);

            .smart-drop-down-button {
                border-width: 0px !important;
                border-left-width: 1px !important;
            }
        }

        .smart-action-button,
        .smart-drop-down-button {
            border-width: 1px;
            border-bottom-width: 1px;
            box-shadow: 0 1px 0 0 var(--smart-primary);
            border-color: var(--smart-border) !important;
            background-color: inherit !important;

            --smart-ui-state-active: var(--smart-input-focus-background) !important;
            --smart-ui-state-color-active: var(--smart-background-color) !important;
            --smart-ui-state-border-active: var(--smart-input-focus-border) !important;
            border-bottom-color: var(--smart-input-focus-border-block-end) !important;
        }

        &.smart-combo-box {
            .smart-action-button {
                --smart-ui-state-active: var(--smart-input-focus-background) !important;
            }
        }

        &.smart-form-input:not(.outlined),
        &.smart-input:not(.outlined):not([drop-down-button-position]) {
            .smart-drop-down-button {
                --smart-ui-state-active: var(--smart-input-focus-background) !important;
                --smart-ui-state-color-active: var(--smart-background-color) !important;
                --smart-ui-state-border-active: var(--smart-input-focus-border) !important;
            }
        }

        &.underlined {
            border-width: 0 0 1px 0 !important;
            border-radius: 0 !important;

            smart-input[focus] {
                border-radius: 0px !important;
                color: var(--smart-background-color) !important;

                .smart-input {
                    border-radius: 0px !important;
                }
            }

            &.smart-date-input,
            &.smart-date-range-input {
                .smart-hint:after {
                    bottom: -1px !important;
                }
            }

            .smart-drop-down-button {
                border-radius: 0px !important;


                &[hover] {
                    color: var(--smart-background-color) !important;
                }

                &[active] {
                    color: var(--smart-background-color) !important;
                }
            }

            &.smart-numeric-text-box[focus],
            &.smart-list-box[focus],
            &.smart-text-box[focus] {
                border-radius: 0px !important;
                border-bottom-width: 2px !important;

            }

            &.smart-date-time-picker {
                &[opened] {
                    border-bottom-width: 2px !important;
                }

                .smart-drop-down-button.smart-calendar-button {
                    border-bottom-color: transparent !important;
                    color: var(--smart-background-color) !important;

                    &[hover] {
                        color: var(--smart-background-color) !important;
                    }

                    &[active] {
                        color: var(--smart-background-color) !important;
                    }
                }
            }

            .smart-action-button,
            .smart-drop-down-button {
                border-left-color: transparent !important;
                border-top-color: transparent !important;
                border-right-color: transparent !important;
            }
        }

        &.smart-grid-cell-editor {

            &.smart-date-input,
            &.smart-date-time-picker,
            &.smart-date-range-input {
                .smart-drop-down-button {
                    border-width: 1px;
                }
            }

        }

    }
}

.smart-element.outlined {
    smart-list-box[focus] {
        box-shadow: none;
    }
}

.smart-drop-down:not(.smart-date-time-drop-down) {
    --smart-surface: var(--smart-secondary-background);
    --smart-border: var(--smart-base);
}