$radius: 11px;
$bar-battery-blocks: 10;
$button-radius: 10px;
$bg: #171717;
$primary-bg: $blue;
$primary-fg: $mantle;
$charging-bg: $green;
$error-bg: $red;

.bar {
  background-color: $crust;

  .panel-button {
    all: unset;
    color: $text;

    >* {
      border-radius: 10px;
      transition: 200ms;
      background-color: transparent;
      box-shadow: none;
    }

    &:focus>*,
    &.focused>* {
      box-shadow: inset 0 0 0 1px $blue;
      background-color: transparentize($subtext1, 94px *.9 / 100);
      color: lighten($subtext1, 8%);
    }

    &:hover>* {
      box-shadow: inset 0 0 0 1px #080808;
      background-color: transparentize($subtext1, 94px *.9 / 100);
      color: lighten($subtext1, 8%);
    }

    &:active,
    &.active,
    &.on,
    &:checked {
      >* {
        box-shadow: inset 0 0 0 1px #080808;
        background-image: linear-gradient(to right, $mantle , darken($mantle, 4%));
        background-color: $blue;
        color: $mantle;
      }

      &:hover>* {
        box-shadow: inset 0 0 0 1px $blue,
          inset 0 0 0 99px transparentize($subtext1, 94px *.9 / 100);
      }
    }

    >* {
      border-radius: 10px;
      margin: 4px;
      padding: 5px 8px;
      font-size: 20px;
    }

    label,
    image {
      font-weight: bold;
    }


    &:not(.flat) {
      // all: unset;
      color: $text;

      >* {
        border-radius: 10px;
        transition: 200ms;
      }

      &:focus>*,
      &.focused>* {
        box-shadow: inset 0 0 0 1px $blue;
        background-color: transparentize($subtext1, 94px *.9 / 100);
        color: lighten($subtext1, 8%);
      }

      &:hover>* {
        box-shadow: inset 0 0 0 1px #080808;
        background-color: transparentize($subtext1, 94px *.9 / 100);
        color: lighten($subtext1, 8%);
      }

      &:active,
      &.active,
      &.on,
      &:checked {
        >* {
          box-shadow: inset 0 0 0 1px #080808;
          background-image: linear-gradient(to right, $mantle , darken($mantle, 4%));
          background-color: $blue;
          color: $mantle;
        }

        &:hover>* {
          box-shadow: inset 0 0 0 1px $blue,
            inset 0 0 0 99px transparentize($subtext1, 94px *.9 / 100);
        }
      }
    }
  }

  .launcher {
    .colored {
      color: transparentize($blue, 0.2);
    }

    &:hover .colored {
      color: $blue;
    }

    &:active .colored,
    &.active .colored {
      color: $blue;
    }
  }

  .workspaces {
    label {
      font-size: 0;
      min-width: 5pt;
      min-height: 5pt;
      border-radius: $radius*.6;
      box-shadow: inset 0 0 0 1px transparent;
      margin: 0 7px*.5;
      transition: 100ms* .5;
      background-color: transparentize($text, .8);

      &.occupied {
        background-color: transparentize($text, .2);
        min-width: 7pt;
        min-height: 7pt;
        // box-shadow: inset 0 0 0 1px $blue;
        // box-shadow: inset 0 0 0 1px transparent;
      }

      &.active {
        // background-color: $primary-bg;
        // box-shadow: inset 0 0 0 1px transparent;
        box-shadow: inset 0 0 0 1px $blue;
        background-image: linear-gradient(to right, $mantle , darken($mantle, 4%));
        min-width: 20pt;
        min-height: 12pt;
      }
    }

    &.active,
    &:active {
      label {
        background-color: transparentize($blue, .3);

        &.occupied {
          background-color: transparentize($blue, .15);
        }

        &.active {
          background-color: $blue;
        }
      }
    }
  }

  .media label {
    margin: 0 (12px * .5)
  }

  .taskbar .indicator.active {
    background-color: $blue;
    border-radius: $radius;
    min-height: 4pt;
    min-width: 6pt;
    margin: 2pt;
  }

  .powermenu.colored,
  .recorder {
    image {
      color: transparentize($red, 0.3);
    }

    &:hover image {
      color: transparentize($red, 0.15);
    }

    &:active image {
      color: $mantle;
    }
  }

  .quicksettings>box>box {
    &.horizontal>* {
      margin: 0 calc(12px * 0.3 / 2);

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    &.vertical>* {
      margin: calc(12px * 0.3 / 2) 0;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .quicksettings:not(.active):not(:active) {
    .bluetooth {
      color: $blue;

      label {
        font-size: 13px * .7;
        color: $text;
        text-shadow: 2pt 2pt 2pt rgba(0, 0, 0, .6);
      }
    }
  }

  .battery-bar {
    >* {
      padding: 0;
      min-height: 10px;
    }

    &.bar-hidden>box {
      padding: 0 12px* .5;

      image {
        margin: 0;
      }
    }

    levelbar * {
      all: unset;
      transition: 200ms;
    }

    .whole {
      image {
        -gtk-icon-shadow: 2pt 2pt 2pt rgba(0, 0, 0, .6);
      }

      label {
        text-shadow: 2pt 2pt 2pt rgba(0, 0, 0, .6);
      }
    }

    .regular image {
      margin-left: 12px * .5;
    }

    trough {
      transition: 200ms;
      border-radius: $radius;
      color: $mantle;
      background-color: $base;
      // border: 1px solid $surface0;
      min-height: 5px;
      min-width: 140px;
      padding: 0px;
      margin: 7px;
    }

    .regular trough {
      margin-right: 5px;
    }

    block {
      margin: 0;

      &:last-child {
        border-radius: 0 $button-radius $button-radius 0;
      }

      &:first-child {
        border-radius: $button-radius 0 0 $button-radius;
      }
    }

    .vertical {
      block {
        &:last-child {
          border-radius: 0 0 $button-radius $button-radius;
        }

        &:first-child {
          border-radius: $button-radius $button-radius 0 0;
        }
      }

    }

    @for $i from 1 through $bar-battery-blocks {
      block:nth-child(#{$i}).filled {
        background-color: $primary-bg
      }

      &.low block:nth-child(#{$i}).filled {
        background-color: $error-bg
      }

      &.charging block:nth-child(#{$i}).filled {
        background-color: $charging-bg
      }

      &:active .regular block:nth-child(#{$i}).filled {
        background-color: $primary-fg
      }
    }

    &.low image {
      color: $error-bg
    }

    &.charging image {
      color: $charging-bg
    }

    &:active image {
      color: $primary-fg
    }
  }
}