@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;

html[data-theme='default'] {

    // Material Tabs
    --mat-tab-labels-bg: var(--white);

    // Material Accordion
    --mat-accordion-expansion-panel-bg: var(--white);
    --mat-accordion-expansion-panel-body-bg: var(--primary-0);

    // Tab Group inside Accordion variables
    --mat-accordion-tab-label-bg: var(--white);

    // Datepicker
    --mat-datepicker-form-bg: var(--white);
    --mat-datepicker-calender-body-selected-txt: var(--white);

    // Material Modals(Dialog)
    --mat-modal-title-bg: var(--primary-color);
    --mat-modal-title-txt: var(--white);

    // Material Select
    --mat-dropdown-form-bg: var(--white);
    --mat-select-trigger-text-size: 0.875rem;
    --mdc-filled-text-field-label-text-size: 0.875rem;

    .sb-mat {
        &__accordion.mat-accordion {
            .mat-expansion-panel {
                border-radius: calculateRem(4px);
            }
        }
    }
    mat-label{
        display: inline-block;
        margin-bottom: .5rem;
        font-size: .8125rem;
        font-weight: 700;
    }

}

html[layout='joy'] {

    --mat-accordion-tab-label-bg: var(--sbt-body-bg);

    // accordion
    --sb-mat-accordion-bradius: 1.5rem;

    .mat-tab__usage-report {
        .mat-tab-header {
            border-radius: calculateRem(16px);
        }
    }

    .sb-mat {
        &__accordion.mat-accordion {
            .mat-expansion-panel {
                border-radius: var(--sbt-bradius-24);
                box-shadow: none;
                border: none;
            }
        }
    }

    .sb-mat__dropdown.sb-mat__dropdown--autocmp.mat-form-field-appearance-fill .mat-form-field-flex {
        padding: 0px 0.75rem 0 1rem;
        background: transparent;
    }

    // Material Modal inside joy layout
    .cdk-overlay-pane {
        &.material-modal {
            .mat-mdc-dialog-container .mdc-dialog__surface {
                border-radius: 1.5rem;
                background-color: var(--mat-modal-title-bg);
            }
            .mdc-dialog__title {
                background: inherit;
                color: inherit;
                padding: 1rem 1rem 0 1rem;
                font-weight: bold;
                .close-btn {
                    background: var(--white);
                    width: calculateRem(24px);
                    height: calculateRem(24px);
                    border-radius: 50%;
                    box-shadow: var(--sbt-box-shadow-3px);

                    &::after {
                        color: var(--red);
                    }
                }
            }
            .sb-mat__modal__content {
                border-bottom: none;
            }
            .sb-mat__modal__actions {
                padding: 0 1rem 1.5rem;
            }
        }
    }

    // Material Dropdown inside joy layout
    .sb-mat__dropdown {
        &.mat-mdc-form-field {
            .mat-mdc-text-field-wrapper {
                border-radius: 1.5rem;
                border: none;
            }
            &.sb-mat__dropdown--language {
                .mat-mdc-text-field-wrapper {
                    box-shadow: var(--sbt-box-shadow-6px);
                }
            }
        }
    }
    // Material text filed inside joy layout
    .mat-mdc-form-field.mat-mdc-form-field-type-mat-input{
        .mat-mdc-form-field-infix{
            min-height: 3rem;
            padding: 12px 0;
        }
        .mat-mdc-text-field-wrapper{
            border-radius: 1.5rem;
            border: 1px solid var(--gray-200);
        }
        .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
            border-bottom-color: transparent;
        }
        .mat-mdc-form-field-subscript-wrapper{
            display: none;
        }
    }

    .mdc-menu-surface.mat-mdc-select-panel {
        border-radius: 1.5rem !important;
    }
}

html[data-theme='default'][data-mode='darkmode'] {

    --gray-222: #222;

    // accordion

    // Tab Group inside Accordion variables
    --mat-accordion-tab-label-bg: var(--gray-222);

    // Datepicker
    --mat-datepicker-form-bg: var(--gray-222);
    --mat-datepicker-calender-body-selected-txt: var(--gray);

    // Material Dropdown
    --mat-dropdown-form-bg: var(--gray-222);
    --mat-modal-title-bg: var(--primary-color);

    --mat-modal-title-txt: var(--color-000);


    // Material Tabs
    .mat-tab__usage-report,
    mat-tab-group {
        canvas {
            filter: invert(1);
        }
    }

    .mat-calendar-arrow {
        filter: invert(1);
    }

    .sb-mat__dropdown.mat-mdc-form-field .mat-mdc-select-placeholder,
    .mat-mdc-option .mdc-list-item__primary-text,
    .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,
    .sb-mat__datepicker .mat-mdc-icon-button svg,
    .mat-mdc-dialog-container .mdc-dialog__content{
        color: var(--primary-color-contrast) !important;
        -webkit-text-fill-color: var(--primary-color-contrast) !important;
    }
    .mat-mdc-form-field.mat-mdc-form-field-type-mat-input .mat-mdc-text-field-wrapper{
        background: transparent;
    }
}

html[data-theme='default'][layout='joy'] {
    --mat-modal-title-bg: var(--sbt-compt-bg);
    --mat-modal-title-txt: var(--gray-800);
}

html[layout='joy'],
html[data-theme='default'][data-mode='darkmode'] {

    // Material Tabs
    --mat-tab-labels-bg: var(--sbt-body-bg2);

    // Material Accordion
    --mat-accordion-expansion-panel-bg: var(--sbt-compt-bg);
    --mat-accordion-expansion-panel-body-bg: var(--sbt-compt-bg);

}

/* Material Tab starts here */
.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: var(--primary-color);
}

.mat-tab__usage-report {
    .mat-tab-header {
        background: var(--mat-tab-labels-bg);

        .mat-tab-label {
            color: var(--gray-800);
        }
    }
}

.sb-mat__accordion,
.mat-tab__usage-report {
    .mat-tab-label {
        opacity: 1;
    }
}

/* Material Tab ends here */

/* Tab Group inside Accordion starts here */
mat-tab-group.sb-mat__tab {
    &.sb-mat__tab--tabinacc {

        .mat-tab-header {
            border-bottom: none;
        }

        .mat-tab-body {
            &.mat-tab-body-active {
                background: var(--mat-accordion-tab-label-bg);
                border: 1px solid var(--gray-100);
                border-top: none;
                padding: calculateRem(16px);
            }

            .mat-tab-body-content {
                overflow: unset;
            }
        }

        .mat-tab-labels,
        .mat-tab-label.mat-tab-label-active {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                width: 100%;
            }
        }

        .mat-tab-labels {
            &::after {
                height: calculateRem(1px);
                background: var(--gray-100);
            }
        }

        .mat-tab-label {
            color: var(--gray-800);
            opacity: 1;

            &.mat-tab-label-active {
                background: var(--mat-accordion-tab-label-bg);
                border: 1px solid var(--gray-100);
                border-bottom: none;
                z-index: 1;

                &::after {
                    height: calculateRem(2px);
                    background: var(--mat-accordion-tab-label-bg);
                }
            }
        }

        &.list-all-mat-tab {
            .mat-tab-label {
                width: 50%;
            }
        }

        .mat-ink-bar {
            display: none;
        }
    }

}

/* Tab Group inside Accordion ends here */

// Slide Toggle
.mat-slide-toggle {

    .mat-slide-toggle-bar {
        background-color: var(--gray-300);
        height: calculateRem(24px);
        width: calculateRem(56px);
        border-radius: calculateRem(16px);

        .mat-slide-toggle-thumb-container {
            top: 0;
        }

        .mat-slide-toggle-thumb-container,
        .mat-slide-toggle-thumb {
            width: calculateRem(24px);
            height: calculateRem(24px);
        }
    }

    &.mat-checked {
        .mat-slide-toggle-bar {
            background-color: var(--primary-color);

            .mat-slide-toggle-thumb-container {
                transform: translate3d(calculateRem(32px), 0, 0);
            }
        }

        .mat-slide-toggle-thumb,
        .mat-ripple-element {
            background-color: var(--white);
        }
    }
}

// Tooltip
mat-tooltip-component .mat-tooltip {
    padding: calculateRem(8px) calculateRem(14px);
    font-size: calculateRem(12px);
    margin: calculateRem(6px);
    background: var(--gray-800);
}

// Accordion

.sb-mat {
    &__accordion.mat-accordion {

        .mat-expansion-panel {
            background: var(--mat-accordion-expansion-panel-bg);
            color: var(--gray-800);
            margin-bottom: calculateRem(8px);
            border: .5px solid var(--primary-300);
            box-shadow: 0 .1875rem .25rem 0 rgba(var(--rc-rgba-primary), .1) !important;

            &.mat-expansion-panel-spacing {
                margin: calculateRem(16px) 0;
            }
        }

        .mat-expansion-panel-header {
            height: calculateRem(56px) !important;
            font-size: calculateRem(16px);
            font-weight: bold;
            background: var(--mat-accordion-expansion-panel-bg) !important;

            .mat-expansion-panel-header-title {
                color: var(--primary-color);
            }

            .mat-expansion-indicator::after {
                border-width: 0 calculateRem(3px) calculateRem(3px) 0;
                color: var(--primary-color);
            }
        }

        .mat-expansion-panel-content {
            .mat-expansion-panel-body {
                padding: calculateRem(16px);
                background: var(--mat-accordion-expansion-panel-body-bg);
            }
        }
    }
}

/* mat accordion styles */
.sb-mat-accordion {
    display: block;

    .mat-expansion-panel {
        background: var(--mat-accordion-expansion-panel-bg);
        border-radius: var(--sb-mat-accordion-bradius) !important;

        .mat-expansion-panel-header {
            font-size: 1rem;
        }

        .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]),
        .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled=true]),
        &:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]) {
            background: transparent;
        }
    }

    .mat-expansion-panel-header-title,
    .mat-expansion-panel-header-description,
    .mat-expansion-indicator::after {
        color: var(--gray-800);
    }

    &__title {
        font-size: 1rem;
    }

    &__content {
        background: transparent;
        color: var(--gray-800);
    }

    &.sbt-filter-accordion {
        .mat-expansion-panel {
            overflow: inherit;
            background: transparent;
            box-shadow: none;
        }

        .mat-expansion-panel-header {
            height: auto !important;
        }

        .mat-expansion-panel-header .mat-expansion-indicator {
            display: none;
        }

        .mat-expansion-panel-body {
            padding: 0 0;
        }

        .mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]),
        .mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled=true]),
        .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]) {
            background: none;
        }
    }
}

/* mat accordion styles */

/* Datepicker starts here*/

.sb-mat__datepicker {
    &.mat-mdc-form-field.mat-form-field-appearance-fill {
        .mat-mdc-text-field-wrapper {
            padding: 0;
            border-radius: calculateRem(4px);
            align-items: center;
            background-color: var(--mat-datepicker-form-bg);
            border: 1px solid var(--gray-200);
            height: 3rem;
            .mat-mdc-form-field-flex{
                flex-direction: row-reverse;
                .mat-mdc-form-field-infix{
                    width: 10rem;
                }
            }
        }

        .mat-form-field-infix {
            padding: .25em 0 .25em;
        }

        // Datepicker form without label
        &.sb-mat__datepicker--nolabel {
            .mat-form-field-flex {
                height: auto;
            }

            .mat-form-field-infix {
                border-top: none;
            }
        }

        .mat-form-field-underline {
            display: none;
        }
    }
}

.mat-calendar-body-cell-content.mat-calendar-body-selected {
    background-color: var(--primary-color);
    color: var(--mat-datepicker-calender-body-selected-txt);
    box-shadow: none;
}

// Active text of calender open datepicker
.mat-datepicker-toggle,
.mat-datepicker-content .mat-calendar-next-button,
.mat-datepicker-content .mat-calendar-previous-button,
.mat-calendar-table-header,
.mat-calendar-body-cell-content,
.mat-date-range-input-separator,
.mat-calendar-body-label,
.mat-calendar-arrow {
    color: var(--gray-800);
}

// Disabled text of calender open datepicker
.mat-icon-button.mat-button-disabled.mat-button-disabled,
.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    color: var(--gray-200);
}

/* Datepicker ends here*/

/* Material Modals starts here */
.cdk-overlay-pane {

    &.material-modal {
        width: 100%;
        height: 100%;

        &.material-modal--small {
            .mat-mdc-dialog-container {
                max-width: 30rem;
            }
        }

        &.material-modal--fullscreen {
            max-width: 100% !important;
            .mat-mdc-dialog-container {
                max-width: 100%;
                margin: auto;

                .mdc-dialog__surface {
                    border-radius: 0 !important;
                }
            }
        }

        &.overflow-visible {
            max-height: 100%;
            height: 100%;
            overflow: auto;
            .mdc-dialog__container {
                overflow: inherit;
                max-height: calc(100vh - 100px);
            }
            .mat-mdc-dialog-container .mdc-dialog__content {
                overflow: inherit;
                max-height: 100%;
            }
            .sb-mat__modal__content {
                overflow: visible;
                max-height: inherit;
            }
        }

        .mat-mdc-dialog-container {
            max-width: 45rem;
            margin: 1rem auto;
            height: fit-content;
            --mdc-dialog-container-elevation-shadow: none;
        }

        .mat-mdc-dialog-container .mdc-dialog__surface {
            border-radius: 4px;
        }

        .mdc-dialog__title {
            padding: 4px 1rem;
            background: var(--primary-color);
            color: var(--mat-modal-title-txt);
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 2.5rem;
                .close-btn {
                    background: inherit;
                    box-shadow: none;
                    outline: none;
                    border: none;
                    margin-left: auto;
                    position: relative;
                    cursor: pointer;

                    &::after {
                        color: var(--white);
                        content: '\2715';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        font-size: calculateRem(16px);
                        font-weight: 700;
                    }
                }
        }

        .mdc-dialog__title::before {
            display: none;
        }

        .sb-mat__modal__content {
            padding: 1rem;
            border-bottom: 1px solid var(--gray-200);
        }

        .sb-mat__modal__actions {
            display: flex;
            justify-content: flex-end;
            padding: .5rem 1rem;
        }
    }

}

// Notification Popup
.sb-mat__modal.sb-notification-modal {
    position: absolute;
    left: auto;
    right: 0;

    .sb-notification-container {
        position: relative;
    }

    .sb-notification-list-items {
        max-height: 100%;
        overflow-y: inherit;
    }
}

// Course Complete Badge Popup

.sb-mat__modal.sb-mat__modal--course-complete {
    .sb-mat__modal__content {
        position: relative;
        border-radius: calculateRem(24px);
    }

    .close-btn {
        position: absolute;
        right: calculateRem(8px);
        top: calculateRem(8px);
    }
}

/* Material Modals ends here */


/* Material Select starts here */
.sb-mat__dropdown {
    .mat-mdc-form-field-focus-overlay{
        background-color: transparent;
    }
    &.mat-mdc-form-field {
        .mat-mdc-text-field-wrapper {
            width: 100%;
            background-color: var(--mat-dropdown-form-bg);
            border-radius: 4px;
            border: 1px solid var(--primary-color);
        }

        .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
            padding-top: 12px;
            padding-bottom: 12px;
        }

        .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
            padding-top: 15px;
            padding-bottom: 8px;
        }

        .mat-mdc-form-field-infix {
            min-height: 3rem;
        }

        .mat-mdc-select-value {
            color: var(--primary-color);
            font-weight: 500;
            -webkit-text-fill-color: var(--primary-color);
        }

        .mdc-floating-label.mat-mdc-floating-label:not([class*="mdc-floating-label--float-above"]) {
            top: 26px;
        }

        &.sb-mat__dropdown--language {
            .mat-mdc-select-value {
                font-size: 1rem;
            }
        }

        .mat-mdc-select-arrow {
            color: var(--primary-color);
        }

        .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
            display: none;
        }

        .mat-mdc-form-field-subscript-wrapper {
            display: none;
        }

        .mdc-line-ripple::after {
            display: none;
        }

        .mat-mdc-select-arrow-wrapper {
            transform: translateY(-4px);
        }
    }

    // Language Selection dropdown
    &--nolabel {

        &.sb-mat__dropdown--language {
            &.mat-mdc-form-field {

                .mat-mdc-text-field-wrapper {
                    height: 3rem;
                }

                .mat-mdc-select-arrow {
                    color: var(--secondary-color);
                }

                .mat-mdc-select-value-text span {
                    display: flex;
                    align-items: center;
                    color: var(--secondary-color);

                    &::before {
                        content: "";
                        background: url(/assets/images/Language.svg) no-repeat center !important;
                        height: calculateRem(20px);
                        width: calculateRem(20px);
                        display: block;
                        margin-right: calculateRem(8px);

                        html[dir="rtl"] & {
                            margin-left: calculateRem(8px);
                        }
                    }
                }
            }
        }
    }
}

.mat-primary .mat-dropdown__options--language.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
    color: var(--secondary-color);
}

.mat-primary .mat-dropdown__options--language .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after, .mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
    color: var(--secondary-color);
}

.mdc-menu-surface.mat-mdc-select-panel {
    background-color: var(--mat-dropdown-form-bg);
}

.mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
    color: var(--primary-color);
}

.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after, .mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
    color: var(--primary-color);
}

/* Material Select starts here */

.mat-autocomplete-panel {
    background: var(--mat-dropdown-form-bg);
    color: var(--gray-800);

    .mat-option {
        color: var(--gray-800);

        &.mat-selected {
            &:not(.mat-active) {
                &:not(:hover) {
                    &:not(.mat-option-disabled) {
                        background: var(--mat-dropdown-form-bg);
                        color: var(--gray-800);
                    }
                }
            }
        }
    }
}

.mat-option.mat-selected {
    &:not(.mat-option-multiple) {
        &:not(.mat-option-disabled) {
            background: var(--mat-dropdown-form-bg);
            color: var(--gray-800);
        }
    }
}

.sb-mat__dropdown.sb-mat__dropdown--autocmp.mat-form-field-appearance-fill .mat-form-field-infix {
    padding: 0 0 0px 0;
    margin-top: -0.0625rem;
    font-size: 0.8125rem;
    line-height: 2.5rem;
}

.sb-mat__dropdown.sb-mat__dropdown--autocmp,
.sb-mat__dropdown.sb-mat__dropdown--autocmp.mat-form-field-appearance-fill .mat-form-field-flex {
    height: 2.5rem;
}

/* Material Select ends here */