dots-hyprland/.config/ags/scss/_sidebars.scss

$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
$system: $secondary;
$onSystem: $onSecondary;
$chatgpt: $primary;
$onChatgpt: $onPrimary;

@mixin group-padding {
    padding: 0.341rem;
}

.sidebar-right {
    @include menu_decel;
    @include elevation-border;
    @include elevation2;
    border-radius: $rounding_large - $elevation_margin + 0.068rem;
    min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
    // min-height: 29.591rem;
    background-color: $t_background;
    padding: 1.023rem;
}

.sideright-show {
    @include menu_decel;
}

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

.sidebar-left {
    @include menu_decel;
    @include elevation-border;
    @include elevation2;
    border-radius: $rounding_large - $elevation_margin + 0.068rem;
    min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
    // min-height: 29.591rem;
    background-color: $t_background;
    padding: 1.023rem;
}

.sideleft-show {
    @include menu_decel;
}

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

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

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

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

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

.sidebar-togglesbox {
    @include full-rounding;
    @include group-padding;
    background-color: $t_surface;
}

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

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

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

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

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

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

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

.sidebar-button-nopad:hover,
.sidebar-button-nopad:focus {
    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,
.sidebar-button-active:focus {
    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 menu_decel;
}

.sidebar-navrail-btn:hover > box > label:first-child,
.sidebar-navrail-btn:focus > 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,
.sidebar-navrail-btn-active:focus > 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-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,
    slider:focus {
        background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%);
    }

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

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

.sidebar-calendar-btn:hover,
.sidebar-calendar-btn:focus {
    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,
.sidebar-calendar-btn-today:focus {
    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,
.sidebar-calendar-monthyear-btn:focus {
    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-selector-tab {
    @include small-rounding;
    @include menu_decel;
    min-height: 2.5rem;
    color: $onSurface;
}

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

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

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

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

.sidebar-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 {
    padding-right: 0.545rem;
}

.sidebar-todo-item-even {
    background-color: $t_t_surfaceVariant;
}

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

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

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

.sidebar-todo-crosser {
    transition: margin 200ms cubic-bezier(0.1, 1, 0, 1), background-color 0ms;
    min-width: 0rem;
}

.sidebar-todo-crosser-crossed {
    background-color: $onBackground;
}

.sidebar-todo-crosser-removed {
    background-color: $error;
}

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

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

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

.sidebar-todo-new {
    @include full-rounding;
    color: $onSecondaryContainer;
    margin: 0.341rem;
    padding: 0.205rem 0.545rem;
    border: 0.068rem solid $onSurface;
}

.sidebar-todo-new:hover,
.sidebar-todo-new:focus {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
}

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

.sidebar-todo-add {
    @include full-rounding;
    @include menu_decel;
    min-width: 1.705rem;
    min-height: 1.705rem;
    color: $onSecondaryContainer;
    border: 0.068rem solid $onSurface;
}

.sidebar-todo-add:hover,
.sidebar-todo-add:focus {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
}

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

.sidebar-todo-add-available {
    @include menu_decel;
    @include full-rounding;
    min-width: 1.705rem;
    min-height: 1.705rem;
    background-color: $primary;
    color: $onPrimary;
    border: 0.068rem solid $primary;
}

.sidebar-todo-add-available:hover,
.sidebar-todo-add-available:focus {
    background-color: mix($primary, $onPrimary, 97%);
}

.sidebar-todo-add-available:active {
    background-color: mix($primary, $onPrimary, 80%);
}

.sidebar-todo-entry {
    @include menu_decel;
    @include small-rounding;
    background-color: $surfaceVariant;
    color: $onSurfaceVariant;
    caret-color: $onSurfaceVariant;
    margin: 0rem 0.341rem;
    min-height: 1.773rem;
    min-width: 0rem;
    padding: 0.205rem 0.682rem;
    border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 50%);
}

.sidebar-todo-entry:focus {
    border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 90%);
}

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

.sidebar-module-btn-arrow {
    @include full-rounding;
    @include icon-material;
    background-color: $t_surfaceVariant;
    min-width: 1.705rem;
    min-height: 1.705rem;
}

.sidebar-chat-apiswitcher {
    @include full-rounding;
    @include group-padding;
    background-color: $t_surface;
}

.sidebar-chat-apiswitcher-icon {
    @include menu_decel;
    @include full-rounding;
    min-width: 2.182rem;
    min-height: 2.182rem;
    color: $onSurface;
}

.sidebar-chat-apiswitcher-icon-enabled {
    background-color: $secondaryContainer;
    color: $onSecondaryContainer;
}

.sidebar-chat-viewport {
    @include menu_decel;
    // margin: 0.682rem 0rem;
    padding: 0.682rem 0rem;
}

.sidebar-chat-textarea {
    @include normal-rounding;
    border: 0.068rem solid $sidebar_chat_textboxareaColor;
    padding: 0.682rem;
}

.sidebar-chat-entry {
    color: $onSurfaceVariant;
    caret-color: $onSurfaceVariant;
    min-height: 1.773rem;
    min-width: 0rem;
}

.sidebar-chat-send {
    @include menu_decel;
    min-width: 1.705rem;
    min-height: 1.705rem;
    border-radius: $rounding_medium - 0.681rem;
    background-color: $sidebar_chat_textboxareaColor;
}

.sidebar-chat-send:hover,
.sidebar-chat-send:focus {
    background-color: mix(
        $sidebar_chat_textboxareaColor,
        $t_onSecondaryContainer,
        97%
    );
}

.sidebar-chat-send:active {
    background-color: mix(
        $sidebar_chat_textboxareaColor,
        $t_onSecondaryContainer,
        80%
    );
}

.sidebar-chat-send-available {
    background-color: $primary;
    color: $onPrimary;
}

.sidebar-chat-send-available:hover,
.sidebar-chat-send-available:focus {
    background-color: mix($primary, $onPrimary, 97%);
}

.sidebar-chat-send-available:active {
    background-color: mix($primary, $onPrimary, 80%);
}

.sidebar-chat-message {
    margin: 0.682rem;
}

.sidebar-chat-indicator {
    @include full-rounding;
    min-width: 0.136rem;
    background-color: $onBackground;
}

.sidebar-chat-indicator-user {
    background-color: $onBackground;
}

.sidebar-chat-indicator-bot {
    background-color: $chatgpt;
}

.sidebar-chat-indicator-System {
    background-color: $system;
}

.sidebar-chat-name {
    @include titlefont;
    padding: 0.341rem;
    margin-left: -0.136rem;
    padding-left: 0.818rem;
}

.sidebar-chat-txtblock {
    margin-left: -0.136rem;
    padding: 0.341rem;
    padding-left: 0.818rem;
}

.sidebar-chat-txt {
    @include readingfont;
}

.sidebar-chat-codeblock {
    @include normal-rounding;
    // @include elevation2;
    background-color: $termbg;
    color: $termfg;
    margin: 0rem 0.682rem;
    border: 0.068rem solid $t_t_t_onSecondaryContainer;
}

.sidebar-chat-codeblock-topbar {
    @include mainfont;
    margin: 0.273rem;
    margin-bottom: 0rem;
    background-color: $secondaryContainer;
    color: $onSecondaryContainer;
    border-radius: $rounding_medium - 0.273rem;
    border: 0.068rem solid mix($secondaryContainer, $onSecondaryContainer, 90%);
    border-top-left-radius: $rounding_small + 0.068rem;
    border-top-right-radius: $rounding_small + 0.068rem;
    padding: 0.341rem 0.477rem;
}

.sidebar-chat-codeblock-topbar-txt {
    @include full-rounding;
    padding: 0.273rem;
}

.sidebar-chat-codeblock-topbar-btn {
    @include full-rounding;
    padding: 0.273rem;
}

.sidebar-chat-codeblock-topbar-btn:hover,
.sidebar-chat-codeblock-topbar-btn:focus {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
}

.sidebar-chat-codeblock-topbar-btn:active {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
}

.sidebar-chat-codeblock-code {
    @include techfont;
    padding: 0.682rem;
}

.sidebar-chat-divider {
    min-height: 1px;
    background-color: $sidebar_chat_textboxareaColor;
    margin: 0rem 0.545rem;
}

.sidebar-chat-welcome-txt {
    margin: 0rem 3.409rem;
}

.sidebar-chat-settings-toggles {
    margin: 0rem 5.455rem;
}

.sidebar-chat-welcome-icon {
    @include full-rounding;
    font-size: 4rem;
}

.sidebar-chat-welcome-logo {
    @include full-rounding;
    @include menu_decel;
    min-height: 4.773rem;
    min-width: 4.773rem;
    font-size: 4rem;
    background-color: white;
    color: black;
}

.sidebar-chat-chip {
    @include menu_decel;
    @include small-rounding;
    padding: 0.341rem 0.477rem;
}

.sidebar-chat-chip-action {
    border: 0.068rem solid $sidebar_chat_textboxareaColor;
}

.sidebar-chat-chip-action:hover,
.sidebar-chat-chip-action:focus {
    background-color: $sidebar_chat_textboxareaColor;
}

.sidebar-chat-chip-action:active {
    background-color: mix(
        $sidebar_chat_textboxareaColor,
        $onSurfaceVariant,
        70%
    );
    color: mix($sidebar_chat_textboxareaColor, $surfaceVariant, 70%);
}

.sidebar-chat-chip-action-active {
    color: $sidebar_chat_textboxareaColor;
    border: 0.068rem solid $sidebar_chat_textboxareaColor;
}

.sidebar-pin {
    @include small-rounding;
    @include menu_decel;
    min-height: 2.386rem;
    min-width: 2.386rem;
    color: $onSurface;
}

.sidebar-pin:hover,
.sidebar-pin:focus {
    background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
}

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

.sidebar-pin-enabled {
    background-color: $primary;
    label {
        color: $onPrimary;
    }
}

.sidebar-pin-enabled:hover,
.sidebar-pin-enabled:focus {
    background-color: mix($primary, $onPrimary, 90%);
}

.sidebar-pin-enabled:active {
    background-color: mix($primary, $onPrimary, 80%);
}

.sidebar-waifu-heading {
    @include titlefont;
    padding: 0.341rem;
    margin-left: -0.136rem;
    padding-left: 0.818rem;
}

.sidebar-waifu-content {
    margin-left: 0.682rem;
}

.sidebar-waifu-txt {
    @include readingfont;
    margin-left: 0.682rem;
}

.sidebar-waifu-image {
    margin-left: 0.682rem;
    @include normal-rounding;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}