.clock {
  @extend .widget;

  label {
    font-size: get-token(font-sizes, large);
    font-weight: bold;
  }
}

.language {
  @extend .widget;

  label {
    font-size: get-token(font-sizes, small);
    font-weight: bold;
  }
}

.logo {
  @extend .widget;

  label {
    @extend .icon;

    color: $accent;
  }
}

.system-tray {
  @extend .widget;
}

.workspaces {
  @extend .widget;

  .workspace {
    min-height: 16px;
    background-color: $surface2;
    border-radius: get-token(border-radius);
    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms;

    &.active {
      min-height: 42px;

      background-color: $accent;
    }
  }
}

.dots-workspaces {
  @extend .widget;

  .workspace {
    label {
      @extend .icon;
    }

    &.empty {
      color: transparentize($white, 0.8);
    }

    &.occupied {
      color: transparentize($white, 0.4);
    }

    &.active {
      color: $white;
    }
  }
}

.bar-media-player {
  @extend .widget;

  .player-controls {
    label {
      @extend .icon;

      font-size: get-token(font-sizes, large);
    }
  }
}

.media-player {
  @extend .panel-widget;

  padding: 8px;

  .player-cover {
    transition: 600ms ease;
    margin: get-token(margin);
    border-radius: get-token(border-radius);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.1;
  }

  .player-controls {
    label {
      font-size: 64px;
      padding: 16px 0px;
    }
  }

  .player-info {
    label {
      font-size: get-token(font-sizes, large);
    }
  }
}

.timer {
  @extend .panel-widget;

  font-size: $text-2xl;

  .timer-controls {
    button {
      padding: $p-base;
      margin: $m-base;
      border-radius: $rounded;

      background-color: $accent;

      &:hover {
        background-color: $surface2;
      }
    }

    label {
      @extend .icon;
    }
  }
}
