* {
  all: unset;
}

.works {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  padding: 10px;
}

button {
  font-size: 20px;
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 0.3s ease;

  // Unoccupied workspace (class "0")
  &.0 {
    color: rgba(255, 255, 255, 0.3);
  }

  // Occupied workspace (class "01" - unoccupied flag + workspace name)
  &.01,
  &.02,
  &.03,
  &.04,
  &.05,
  &.06,
  &.07,
  &.08,
  &.09,
  &.010,
  &.011,
  &.012,
  &.013,
  &.014,
  &.015,
  &.016,
  &.017,
  &.018,
  &.019,
  &.020 {
    color: rgba(255, 255, 255, 0.7);
  }

  // Focused workspace (class "011" - unoccupied + workspace + focused)
  &.011,
  &.022,
  &.033,
  &.044,
  &.055,
  &.066,
  &.077,
  &.088,
  &.099,
  &.01010,
  &.01111,
  &.01212,
  &.01313,
  &.01414,
  &.01515,
  &.01616,
  &.01717,
  &.01818,
  &.01919,
  &.02020 {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
  }

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}