.pisell-event-usability {
  width: 126px;
  &-content {
    display: flex;
    flex-wrap: wrap;
  }

  &-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    color: var(--Gray-900, #101828);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  &-count {
    font-weight: 400;
    color: var(--Gray-500, #667085);
    font-weight: 400;
  }
}

.pisell-event-usability-selected {
  border: 1px solid var(--Primary-600, #7f56d9);
  background: var(--Primary-600, #7f56d9);
  &:hover {
    background: var(--Primary-600, #7f56d9);
  }

  .pisell-event-usability-slot,
  .pisell-event-usability-count {
    color: var(--Base-White, #fff) !important;
  }
}
