.bar {
  background: $bar-bg;
  min-height: 32px;

  .module {
    margin: 0 0.5rem;
  }
}

/* workspaces */
.bar .workspaces {
  margin: 0.2rem 0.5rem;

  button {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2rem;
    margin: 0.7rem 0.2rem;
    min-width: 1rem;
    transition: 100ms linear;
  }

  .focused {
    min-width: 2rem;
  }

  .monitor0 {
    background: $red;
  }

  .monitor1 {
    background: $yellow;
  }

  .monitor2 {
    background: $green;
  }

  .monitor3 {
    background: $blue;
  }
}

/* music */
.bar .music {
  &>box {
    @include animate;
    border-radius: $round2;
    margin: 0.4rem;
  }

  &.active>box {
    background: $surface;
  }

  .cover {
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    min-width: 2rem;
    min-height: 2rem;
  }
}

/* tray */
.tray button {
  @include button;
  background: none;
  margin: 0.5rem 0;

  &:not(:last-child) {
    margin-right: 0.3rem;
  }

  &.active {
    background: $surface;
  }
}

menu {
  background: $tooltip-bg;
  border-radius: $round;

  separator {
    background-color: $surface;
  }

  menuitem {
    @include button;
    border-radius: 0;
    padding: 0.4rem 0.7rem;

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

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

    &:only-child {
      border-radius: $round;
    }
  }
}

/* system-info */
.bar .system-info {
  margin: 0 0.2rem;

  &>box {
    margin: 0 0.3rem;
  }

  .type {
    font-size: 0.55rem;
    font-weight: 300;
  }

  .value {
    font-size: 0.8rem;
  }
}

.system-menu-toggler {
  box {
    @include animate;
    margin: 0.4rem 0;
    border-radius: $round2;
  }

  &.active box {
    background: $surface;
  }
}