// sideleft sideright stuff

.sidebar-right {
    @include md3_decel;
    @include large-rounding;
    @include elevation-border;
    @include elevation2;
    // min-width: 29.591rem;
    // min-height: 29.591rem;
    background-color: $t_background;
    padding: 1.023rem;
}

.sideright-show {
    @include md3_decel;
}

.sideright-hide {
    margin-right: -30.682rem;
    // opacity: 0;
    @include md3_accel;
}

.sidebar-left {
    @include md3_decel;
    @include large-rounding;
    @include elevation-border;
    @include elevation2;
    // min-width: 29.591rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
    // min-height: 29.591rem;
    background-color: $t_background;
    padding: 1.023rem;
}

.sideleft-show {
    @include md3_decel;
}

.sideleft-hide {
    margin-left: -30.682rem;
    // opacity: 0;
    @include md3_accel;
}

.sidebar-group {
    @include normal-rounding;
    // @include elevation-border;
    @include group-padding;
    background-color: $t_surface;
}

.sidebar-group-nopad {
    @include normal-rounding;
    // @include elevation-border;
    background-color: $t_surface;
}

.sidebar-group-invisible {
    @include group-padding;
}

.sidebar-group-invisible-morehorizpad {
    padding: 0.341rem 0.682rem;
}

.sidebar-iconbutton {
    @include full-rounding;
    @include md3_decel;
    color: $onSurface;
    min-width: 2.727rem;
    min-height: 2.727rem;
}

.sidebar-iconbutton:hover {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
}

.sidebar-iconbutton:active {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
}

.sidebar-button {
    @include md3_decel;
    padding: 0rem $rounding_small;
    background-color: $t_secondaryContainer;
    color: $onSecondaryContainer;
}

.sidebar-button-nopad {
    @include md3_decel;
    background-color: $t_secondaryContainer;
    color: $onSecondaryContainer;
}

.sidebar-button:hover {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
}

.sidebar-button:active {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
}

.sidebar-button-nopad:hover {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
}

.sidebar-button-nopad:active {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
}

.sidebar-button-left {
    border-top-left-radius: $rounding_small;
    border-bottom-left-radius: $rounding_small;
}

.sidebar-button-right {
    border-top-right-radius: $rounding_small;
    border-bottom-right-radius: $rounding_mediumsmall;
}

.sidebar-button-alone {
    @include small-rounding;
}

.sidebar-button-alone-normal {
    @include small-rounding;
}

.sidebar-button-active {
    background-color: $primary;
    color: $onPrimary;
}

.sidebar-button-active:hover {
    background-color: mix($primary, $hovercolor, 90%);
}

.sidebar-button-active:active {
    background-color: mix($primary, $hovercolor, 70%);
}

.sidebar-buttons-separator {
    min-width: 0.068rem;
    min-height: 0.068rem;
    background-color: $onSurfaceVariant;
}

.sidebar-navrail {
    // background-color: $t_surface;
    padding: 0rem $rounding_medium;
}

.sidebar-navrail-btn>box>label {
    @include full-rounding;
    @include md3_decel;
}

.sidebar-navrail-btn:hover>box>label:first-child {
    background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
}

.sidebar-navrail-btn:active>box>label:first-child {
    background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
}

.sidebar-navrail-btn-active>box>label:first-child {
    background-color: $secondaryContainer;
    color: $onSecondaryContainer;
}

.sidebar-navrail-btn-active:hover>box>label:first-child {
    background-color: mix($secondaryContainer, $hovercolor, 90%);
    color: mix($onSecondaryContainer, $hovercolor, 90%);
}

.sidebar-sysinfo-grouppad {
    padding: 1.159rem;
}

.sidebar-memory-ram-circprog {
    @include fluent_decel_long;
    min-width: $rounding_small;
    min-height: 4.091rem;
    padding: 0.409rem;
    background-color: $secondaryContainer;
    color: $onSecondaryContainer;
    font-size: 0px;
}

.sidebar-memory-swap-circprog {
    @include fluent_decel_long;
    min-width: $rounding_small;
    min-height: 2.255rem;
    padding: 0.409rem;
    margin: 0.918rem;
    background-color: $secondaryContainer;
    color: $onSecondaryContainer;
    font-size: 0px;
}

.sidebar-cpu-circprog {
    min-width: $rounding_small;
    min-height: 3.409rem;
    padding: 0.409rem;
    background-color: $secondaryContainer;
    color: $onSecondaryContainer;
    @include fluent_decel_long;
    font-size: 0px;
}

// .sidebar-sysinfo-txt {
//     font-size: 1.0909rem;
//     @include techfont;
// }

.sidebar-viewport {
    @include small-rounding;
}

.sidebar-scrollbar {
    trough {
        @include full-rounding;
        min-width: 0.545rem;
        background-color: transparent;
    }

    slider {
        @include full-rounding;
        min-width: 0.273rem;
        min-height: 2.045rem;
        background-color: $t_onSurfaceVariant;
    }

    slider:hover {
        background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%);
    }

    slider:active {
        background-color: mix($onSurfaceVariant, $surfaceVariant, 50%);
    }
}

.sidebar-calendar-btn {
    @include full-rounding;
    @include md3_decel;
    min-height: 2.523rem;
    min-width: 2.523rem;
    color: $onSurface;
}

.sidebar-calendar-btn:hover {
    background-color: $hovercolor;
}

.sidebar-calendar-btn:active {
    background-color: $activecolor;
}

.sidebar-calendar-btn-txt {
    margin-left: -10.341rem;
    margin-right: -10.341rem;
}

.sidebar-calendar-btn-today {
    background-color: $primary;
    color: $onPrimary;
}

.sidebar-calendar-btn-today:hover {
    background-color: mix($primary, $hovercolor, 90%);
}

.sidebar-calendar-btn-today:active {
    background-color: mix($primary, $hovercolor, 70%);
}

.sidebar-calendar-btn-othermonth {
    color: mix($onSurface, $surface, 50%);
}

.sidebar-calendar-header {
    margin: 0.341rem;
}

.sidebar-calendar-monthyear-btn {
    @include full-rounding;
    padding: 0rem 0.682rem;
    background-color: $t_surfaceVariant;
    color: $onSurfaceVariant;
}

.sidebar-calendar-monthyear-btn:hover {
    background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%);
    color: mix($onSurfaceVariant, $surfaceVariant, 95%);
}

.sidebar-calendar-monthyear-btn:active {
    background-color: mix($surfaceVariant, $onSurfaceVariant, 85%);
    color: mix($onSurfaceVariant, $surfaceVariant, 85%);
}

.sidebar-calendar-monthshift-btn {
    @include full-rounding;
    min-width: 2.045rem;
    min-height: 2.045rem;
    background-color: $t_surfaceVariant;
    color: $onSurfaceVariant;
}

.sidebar-calendar-monthshift-btn:hover {
    background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%);
    color: mix($onSurfaceVariant, $surfaceVariant, 95%);
}

.sidebar-calendar-monthshift-btn:active {
    background-color: mix($surfaceVariant, $onSurfaceVariant, 85%);
    color: mix($onSurfaceVariant, $surfaceVariant, 85%);
}

.sidebar-todo-selector-tab {
    @include small-rounding;
    transition: 0ms;
    min-height: 2.5rem;
    color: $onSurface;
}

.sidebar-todo-selector-tab:hover {
    background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
}

.sidebar-todo-selector-tab:active {
    background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
}

.sidebar-todo-selector-tab-active>box>label {
    color: $primary;
}

.sidebar-todo-selector-highlight-offset {
    margin-top: -0.205rem;
    margin-bottom: 0.205rem;
}

.sidebar-todo-selector-highlight {
    transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with GtkStack animation of the actual todo widget content
    color: $primary;
    padding: 0rem 2.045rem;
    min-height: 0.205rem;
}

.sidebar-todo-item-action {
    border-radius: 9999px;
    min-width: 1.705rem;
    min-height: 1.705rem;
}

.sidebar-todo-item-action:hover {
    background-color: mix($t_surface, $t_onSurface, 95%);
}

.sidebar-todo-item-action:active {
    background-color: mix($t_surface, $t_onSurface, 85%);
}

.sidebar-clipboard-item {
    border-radius: $rounding_small;
    min-height: 2.045rem;
    padding: 0.341rem;
    background-color: $t_secondaryContainer;
    color: $onSecondaryContainer;
}

.sidebar-clipboard-item:hover {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 90%);
}

.sidebar-clipboard-item:active {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
}

// cool gradient background from amberol
// .main-window {
//     background: linear-gradient(127deg, alpha(@background_color_0, .55), alpha(@background_color_0, 0) 70.71%),
//         linear-gradient(217deg, alpha(@background_color_1, .55), alpha(@background_color_1, 0) 70.71%),
//         linear-gradient(336deg, alpha(@background_color_2, .55), alpha(@background_color_2, 0) 70.71%);
//     transition-property: background;
//     transition-duration: 250ms;
//     transition-timing-function: ease;
// }