@use "colors" as *;

:root {
    --mat-standard-button-toggle-selected-state-text-color: white;
    --mat-standard-button-toggle-selected-state-background-color: var(--primary-blue-color);
}

:host ::ng-deep.mat-mdc-button > .mat-icon {
    font-size: 24px !important;
    height: 24px !important;
    width: 24px !important;
}

:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    line-height: 23px;
    width: 42px;
    padding: 0 10px;
    height: 22px;
}

:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
    background-color: $primary-color;
    color: white !important;

    .mat-pseudo-checkbox {
        display: none;
    }
    .mat-button-toggle-checkbox-wrapper {
        width: 0;
    }
    .mat-button-toggle-button:has(.mat-button-toggle-checkbox-wrapper) {
        padding-left: 0;
    }
}

:host ::ng-deep .mat-button-toggle-group-appearance-standard {
    border-radius: 2px;
    border: none !important;
    & .mat-button-toggle-appearance-standard + .mat-button-toggle-appearance-standard {
        border-left: none !important;
    }
}

::ng-deep .mat-button-toggle-disabled.mat-button-toggle-checked {
    background: rgba($color: #bdbdbd, $alpha: 1) !important;

    button {
        color: #fff;
        opacity: 1;
    }
}

::ng-deep .mat-button-toggle-appearance-standard {
    opacity: 1;
    border: solid 1px #b3b3b3;
    button {
        opacity: 1;
        border: 1px solid #bdbdbd;
    }
}

::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
    opacity: 1;
}

:host ::ng-deep mat-button-toggle-group mat-button-toggle:not(.mat-button-toggle-disabled) button {
    border: none !important;
}