.root
  background-color: transparent

  @mixin interactive
    min-height: {{custom.font_size}}pt
    border-radius: .5 * {{custom.font_size}}pt
    padding: 2pt
    margin: 0 2pt 0
    transition: .25s

    background-color: {{colors.surface.default.hex}}

    &:hover
      background-color: {{colors.surface_container_high.default.hex}}

    &:active
      background-color: {{colors.surface_container_highest.default.hex}}

  .trigger-guard
    min-height: 5pt
    background-color: transparent

  .widgets
    margin: 5pt
    padding: 5pt
    background-color: {{colors.surface.default.hex}}
    border-radius: {{custom.font_size}}pt
    border: 2px solid {{colors.outline.default.hex}}

    .launcher
      @include interactive

      min-width: {{custom.font_size}}pt

      .icon
        font-size: {{custom.font_size}}pt
        padding: 0 2pt
        color: {{colors.on_surface.default.hex}}

    .workspaces
      @include interactive

      .button
        font-size: 0
        transition: .5s
        margin: 0 2pt
        background-color: {{colors.outline_variant.default.hex}}
        min-width: .4 * {{custom.font_size}}pt
        min-height: .4 * {{custom.font_size}}pt
        border-radius: .5 * {{custom.font_size}}pt

        &.occupied
          background-color: {{colors.on_surface.default.hex}}
          min-width: .6 * {{custom.font_size}}pt
          min-height: .6 * {{custom.font_size}}pt
          border-radius: .5 * {{custom.font_size}}pt

        &.active
          background-color: {{colors.primary.default.hex}}
          min-width: 1.67 * {{custom.font_size}}pt
          min-height: {{custom.font_size}}pt
          border-radius: .4 * {{custom.font_size}}pt

    .date
      @include interactive

      .label
        color: {{colors.on_surface.default.hex}}
        font-size: {{custom.font_size}}pt
        font-family: {{custom.font_sans_serif_all}}
        font-weight: 500
        margin: 0 4pt

    .systray
      .item
        @include interactive

        .icon
          font-size: {{custom.font_size}}pt
          padding: 0 2pt
          color: {{colors.on_surface.default.hex}}

    .battery
      @include interactive