* {
  all: unset;
}

window {
  background-color: transparent;
}

.works {
  background-color: rgba(30, 30, 30, 0.9);
  border-radius: 10px;
  padding: 15px;
}

button {
  font-size: 24px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  min-width: 40px;
  color: #888;

  // Unoccupied workspace
  &.0 {
    color: #666;
    background-color: transparent;
  }

  // Occupied (class will be like "01", "02", etc)
  &[class*="1"],
  &[class*="2"],
  &[class*="3"],
  &[class*="4"],
  &[class*="5"],
  &[class*="6"],
  &[class*="7"],
  &[class*="8"],
  &[class*="9"] {
    &:not(.0) {
      color: #fff;
      background-color: rgba(255, 255, 255, 0.15);
    }
  }

  &:hover {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
  }
}