@import "../scss/sc-mixins/sc-breakpoints";
@import "../scss/sc-variables";

.event {
  &-status {
    --event-color: white;
    --event-bg-color: LightSlateGray;

    color: var(--event-color);
    display: flex;
    align-items: center;
    gap: 8px;

    &__preview {
      background-color: var(--event-bg-color);
      height: 24px;
      width: 100%;
      border-radius: 4px;
    }

    &__label {
      padding: 2px 8px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: inherit;
    }

    //? user can select status
    &.--select {
      cursor: pointer;

      .event-status {
        &__preview {
          padding-left: $spacer * 0.5;
          display: flex;
          gap: $spacer * 0.5;
          min-width: 0;
        }

        &__expand-icon {
          color: inherit;
        }
      }
    }
  }
}