$personal-color: #d7afaf;
$development-color: #795f7c;
$Housing-color: #87af87;
$work-color: #4a5f76;

.profile {
  color: $primary;
  background-color: $surface_container;
  padding: 0px 10px;
  transition: 0.3s all;
  &:hover {
    &.profile-Penelope,
    &.profile-Development,
    &.profile-Housing,
    &.profile-Work {
      color: $on_primary_container;
    }
    &.profile-Penelope {
      background-color: rgba($personal-color,0.5);
    }
    &.profile-Development {
      background-color: rgba($development-color, 0.5);
    }
    &.profile-Housing {
      background-color: rgba($Housing-color, 0.5);
    }
    &.profile-Work {
      background-color: rgba($work-color, 0.5);
    }
  }
}
.workspacesev>box>box>box>button,.middle-workspace,.center {
  border: 0px;
}
.workspacesev>box {
  margin-right: 2px;
}
.workspaces {
  box.ws-center {
     background-color: rgba($primary_container, 0.75);
      color: $on_primary_container;
      border: 0px;
  }
  revealer {
    &>box>box>button {
      border: 0px;
      color: $on_primary_container;
      &.profile-Penelope {
        color: $personal-color;
        border-color: $personal-color;
      }
      &.profile-Development {
        color: $development-color;
        border-color: $development-color;
      }
      &.profile-Housing {
        color: $Housing-color;
        border-color: $Housing-color;
      }
      &.profile-Work {
        color: $work-color;
        border-color: $work-color;
      }
      &:hover {
        background-color: rgba($bar-bg-color,0.5);
        &.profile-Penelope {
          background-color: rgba($personal-color,0.5);
        }
        &.profile-Development {
          background-color: rgba($development-color,0.5);
        }
        &.profile-Housing {
          background-color: rgba($Housing-color,0.5);
        }
        &.profile-Work {
          background-color: rgba($work-color,0.5);
        }
      }
    }
  }
  button {
    min-width: 35px;
    padding: 1px 2px;
    transition: all 0.3s;
    label {
      padding: 2px 6px;
      margin-right: -10px;
    }
    .workspace-number {
      margin: 0px;
      margin-left: -2px;
      margin-top: -6px;
      padding: 0px;
      font-size: 0.6em;
    }
  }
}