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

.label
  color: {{colors.on_surface.default.hex}}
  font-size: {{custom.font_size}}pt;

.workspace
  min-height: {{custom.font_size}}pt;

  .button
    font-size: 0;
    transition: .5s;
    margin: 0 .3 * {{custom.padding}}pt;
    background-color: {{colors.surface_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;