// Made to be pixel-perfect with 11pt font size
// 1rem = 11pt = 14.6666666667px

.bar-bg {
    min-height: 3.81818181817rem;
    margin: 0.27272727272rem 0.546rem;
    border-radius: 26px;
    background-color: mix(shade($colorbarbg, 45%), $primary, 97%);
    background-image: linear-gradient(135deg, shade($onSecondary, 47%) 18%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 37%, shade($onSecondary, 47%) 37%, shade($onSecondary, 47%) 63%, rgba(0, 0, 0, 0) 63%, rgba(0, 0, 0, 0) 85%, shade($onSecondary, 47%) 85%);
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
    animation-name: flyin-top;
    animation-duration: 250ms;
    animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
    animation-iteration-count: 1;
}

.bar-sidespace {
    min-width: 1.5rem;
}

.bar-group-margin {
    padding: 0.2rem;
}

.bar-group {
    background-color: mix($t_surface, $t_onSurface, 90%);
    border-top: 1px solid mix($t_surface, $t_onSurface, 80%);
    border-left: 1px solid mix($t_surface, $t_onSurface, 80%);
    border-right: 1px solid mix($t_surface, $t_onSurface, 85%);
    border-bottom: 1px solid mix($t_surface, $t_onSurface, 85%);
}

.bar-group-pad {
    padding: 0rem 1.023rem;
}

.bar-group-pad-less {
    padding: 0rem 0.681rem;
}

.bar-group-pad-system {
    padding-left: 1.023rem;
    padding-right: 0.547rem;
}

.bar-group-pad-music {
    padding-right: 1.023rem;
    padding-left: 0.273rem;
    margin-left: 1.023rem;
}

.bar-group-pad-left {
    padding-left: 1.364rem;
    padding-right: 0.681rem;
}

.bar-group-pad-right {
    padding-left: 0.681rem;
    padding-right: 1.364rem;
}

.bar-group-pad-leftonly {
    padding-left: 0.681rem;
}

.bar-group-pad-rightonly {
    padding-right: 0.681rem;
}

.bar-group-standalone {
    border-radius: 1.364rem;
}

.bar-group-round {
    border-radius: 10rem;
}

.bar-group-middle {
    border-radius: 0.477rem;
}

.bar-group-left {
    border-radius: 0.477rem;
    border-top-left-radius: 1.364rem;
    border-bottom-left-radius: 1.364rem;
    margin-left: 1.092rem;
}

.bar-group-right {
    border-radius: 0.477rem;
    border-top-right-radius: 1.364rem;
    border-bottom-right-radius: 1.364rem;
    margin-right: 1.092rem;
}

.bar-ws-width {
    min-width: 18.382rem;
}

.bar-separator {
    min-width: 0.341rem;
    min-height: 0.341rem;
    background-color: mix($t_surface, $t_onSurface, 90%);
    border-radius: 999px;
    margin: 0rem 0.341rem;
}

.bar-ws {
    min-height: 1.770rem;
    min-width: 1.770rem;
    font-size: 1.091rem;
}

.bar-ws-button:hover {
    .bar-ws-empty {
        color: $primary;
    }

    .bar-ws-occupied {
        background-color: $primaryContainer;
        color: $onPrimaryContainer;
    }

    .bar-ws-active {
        background-color: $primary;
        color: $onPrimary;
    }
}

.bar-ws-empty {
    color: $onBackground;
}

.bar-ws-occupied {
    background-color: $secondaryContainer;
    color: $onSecondaryContainer;
}

.bar-ws-active {
    background-color: $primary;
    color: $onPrimary;
    border-radius: 999px;
    transition: 100ms cubic-bezier(0, 1, 0, 1);
}

.bar-ws-left {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.bar-ws-right {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.bar-batt {
    border-radius: 999px;
    padding: 0rem 0.341rem;
    background-color: $onPrimaryContainer;
    color: $primaryContainer;
}

.bar-sidemodule {
    min-width: 25.227rem;
}

.bar-batt-low {
    background-color: $error;
    color: $onError;
}

.bar-batt-prog-low {
    background-color: $error;
    color: $onError;
}

.bar-music-playstate {
    min-height: 1.5rem;
    min-width: 1.5rem;
    border-radius: 10rem;
    background-color: $t_surface;
    color: $onSurface;
    margin-left: 2rem;
}

.bar-music {
    margin-left: 2rem;
}

.bar-music-label-container {
    min-width: 18.770rem;
}

.bar-music-playstate-playing {
    min-height: 1.5rem;
    min-width: 1.5rem;
    border-radius: 10rem;
    background-color: $t_surface;
    color: $onSurface;
    margin-left: 2rem;
}

.bar-music-playstate-txt {
    @include icon-material;
    font-size: 1.4545rem;
    margin: -0.1rem 0rem;
}

.bar-music-coverbox {
    box-shadow: $onPrimary 0px 0px 2rem -0.3rem;
    border: $onPrimaryDark 2px solid;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 125%;
    min-height: 3rem;
    min-width: 3rem;
    border-radius: 0.75rem;
}

.bar-music-extended-bg {
    border-radius: 1.364rem;
    min-width: 34.091rem;
}

.bar-music-extended-ctl-bg {
    border-radius: 1.364rem;
    background-color: rgba(30, 30, 30, 0.6);
}

.bar-music-bottom-bg {
    border-radius: 1.364rem;
    min-width: 34.091rem;
}

.bar-music-bottom-ctl-bg {
    border-radius: 1.364rem;
    background-color: rgba(30, 30, 30, 0.6);
}

.bar-music-extended-textbox {
    margin: 1.023rem;
}

.bar-music-bottom-cover {
    border-radius: 10rem;
}

.bar-music-hide-false {
    @include md3_decel;
    transition-duration: 100ms;
    opacity: 1;
}

.bar-music-hide-true {
    @include md3_accel;
    transition-duration: 100ms;
    opacity: 0;
}

.bar-music-btn {
    font-size: 1.364rem;
    border-radius: 10rem;
    min-height: 2.591rem;
    min-width: 2.591rem;
}

.bar-music-btn:hover {
    background-color: $hovercolor;
}

.bar-prog-batt {
    min-height: 0.955rem;
    min-width: 0.068rem;
    padding: 0rem;
    border-radius: 10rem;

    trough {
        min-height: 0.954rem;
        min-width: 0.068rem;
        border-radius: 10rem;
        background-color: $onPrimaryContainer;
    }

    progress {
        min-height: 0.680rem;
        min-width: 0.680rem;
        margin: 0rem 0.137rem;
        border-radius: 10rem;
        background-color: $primaryContainer;
    }
}

.bar-prog-batt-low {
    min-height: 0.954rem;
    min-width: 0.068rem;
    padding: 0rem;
    border-radius: 10rem;

    trough {
        min-height: 0.954rem;
        min-width: 0.068rem;
        border-radius: 10rem;
        background-color: $onErrorContainer;
    }

    progress {
        min-height: 0.680rem;
        min-width: 0.680rem;
        margin: 0rem 0.137rem;
        border-radius: 10rem;
        background-color: $errorContainer;
    }
}

.bar-batt-chargestate {
    border-radius: 10rem;
    background-color: transparent;
    background-color: $primaryContainer;
}

.bar-batt-chargestate-charging {
    border-radius: 10rem;
    min-width: 0.681rem;
    min-height: 0.681rem;
}

.bar-batt-chargestate-low {
    background-color: $errorContainer;
}

.bar-batt-percentage {
    font-size: 1rem;
    margin-top: -0.068rem;
    font-weight: 500;
}

.corner {
    background-color: $t_background;
    border-radius: 1.5rem;
}

.bar-space-button {
    padding: 0.341rem;

    box {
        border-radius: 999px;
        padding: 0rem 0.682rem;
    }
}

.bar-space-button:hover {
    box {
        background-color: $hovercolor;
    }
}

.bar-space-button:active {
    box {
        background-color: $activecolor;
    }
}

.bar-space-button-leftmost {
    box {
        margin: 0rem 1.5rem;
    }
}

.bar-space-area-rightmost>box {
    padding-right: 2.386rem;
}

.progicon {
    margin-right: 0.75rem;
}

.progiconicon {
    font-size: 32px;
}

.calendar {
    background-color: $colorbarbg;
    border: 0.2rem solid $t_secondaryContainer;
    border-radius: 1rem;
    color: $onBackground;
    padding: .2em;
    font-family: 'Torus';
    margin: 1rem;
}

calendar {
    padding: 0.5rem;

    * {
        padding: 0.1rem;
        color: $primary;
    }

    :selected {
        color: $onPrimary;
        font-weight: bolder;
        background-color: $primary;
        border-radius: 0.5rem;
    }

    .header {
        color: $onBackground;
    }

    .button {
        color: $onBackground;
    }

    :indeterminate {
        color: $onBackground;
    }
}

.bar-system .bar-sides {
    transition: 500ms cubic-bezier(0.05, 0.7, 0.1, 1);
    margin: 0.25rem;
    border-radius: 1.5rem;
    padding: 0 1rem;
}

.hovered.bar-system .bar-sides {
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 60%, tint($surfaceVariant, 10%) 60%);
    background-size: 400% auto;
    background-color: $surfaceVariant;
    background-position: 60% 50%;
}

tooltip {
    background-color: transparent;
    border: none;

    > * > *{
        background-color: $background;
        border-radius: 1.5rem;
        color: $onBackground;
        padding: 1rem;
        margin: 0.5rem;
        box-shadow: 0.25rem 0 0.25rem 0 $background;
    }
}

.musicbox {
    margin-top: -5rem;
    margin-bottom: 0.01rem;
    margin-left: 1rem;
}

.musicbox-bar {
    min-height: 0.155rem;
    min-width: 1rem;
    padding: 0rem;
    border-radius: 10rem;

    trough {
        background-color: transparent;
    }

    progress {
        min-height: 0.155rem;
        min-width: 2rem;
        margin: 0rem 0.137rem;
        border-top-left-radius: 10rem;
        border-top-right-radius: 10rem;
        background-color: $secondaryContainer;
    }
}

.systray-icon {
    margin-right: 0.5rem;
    margin-left: 0.25rem;
}

menu {
    background: shade($background, 70%);
    border-radius: 12px;
    border: 2px solid shade($secondaryContainer, 40%);
    margin-top: 2rem;
    padding: 1rem 0;
    color: $onBackground;
  }
  
  menu > menuitem {
    padding: 0.4em 1.5rem;
    background: transparent;
    transition: 0.2s ease background;
  }
  
  menu > menuitem:hover {
    background: rgba(255, 255, 255, 0.4);
  }
  
  menu > menuitem check:checked ~ label {
    color: $onBackground;
    font-weight: 600;
  }
  
  menubar > menuitem {
    margin-left: 0.6rem;
  }