@import 'variables';

.magnet-choice-label {
  display: flex;
  cursor: pointer;
  user-select: none;

  &--ghost {
    display: flex;
  }

  &--filled {
    display: inline-flex;
    border-radius: 4px;
    padding: 8px 10px;
  }

  &--filled.magnet-choice-label--light {
    background-color: var(--jfv-navy-25);
  }

  &--filled.magnet-choice-label--dark {
    background-color: var(--jfv-gray-500);
    border: 1px solid var(--jfv-gray-700);
  }

  &--small:not(&--compact) {
    gap: 8px;
  }

  &--medium:not(&--compact),
  &--large:not(&--compact) {
    gap: 12px;
  }

  &--compact.magnet-choice-label--small {
    gap: 6px;
  }

  &--compact.magnet-choice-label--medium,
  &--compact.magnet-choice-label--large {
    gap: 10px;
  }

  &--truncate-both,
  &--truncate-description,
  &--truncate-label {
    max-width: 100%;
  }

  &__container {
    .magnet-choice-label--truncate-both &,
    .magnet-choice-label--truncate-description &,
    .magnet-choice-label--truncate-label & {
      overflow: hidden;
    }
  }

  &__text {
    display: block;
    font-weight: 500;

    .magnet-choice-label--compact & {
      font-size: 14px;
    }

    .magnet-choice-label:not(.magnet-choice-label--compact)--small & {
      font-size: 14px;
    }

    .magnet-choice-label:not(.magnet-choice-label--compact)--medium &,
    .magnet-choice-label:not(.magnet-choice-label--compact)--large & {
      font-size: 16px;
    }

    .magnet-choice-label--light:not(.magnet-choice-label--disabled) & {
      color: var(--jfv-navy-700);
    }

    .magnet-choice-label--light.magnet-choice-label--disabled & {
      color: var(--jfv-navy-100);
    }

    .magnet-choice-label--dark:not(.magnet-choice-label--disabled) & {
      color: var(--jfv-white);
    }

    .magnet-choice-label--dark.magnet-choice-label--disabled & {
      color: var(--jfv-gray-400);
    }

    .magnet-choice-label--truncate-both &,
    .magnet-choice-label--truncate-label & {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &__description {
    display: block;

    .magnet-choice-label--small & {
      font-size: 12px;
    }

    .magnet-choice-label--medium &,
    .magnet-choice-label--large & {
      font-size: 14px;
    }

    .magnet-choice-label--light:not(.magnet-choice-label--disabled) & {
      color: var(--jfv-navy-500);
    }

    .magnet-choice-label--light.magnet-choice-label--disabled & {
      color: var(--jfv-navy-100);
    }

    .magnet-choice-label--dark:not(.magnet-choice-label--disabled) & {
      color: var(--jfv-gray-300);
    }

    .magnet-choice-label--dark.magnet-choice-label--disabled & {
      color: var(--jfv-gray-400);
    }

    .magnet-choice-label--truncate-both &,
    .magnet-choice-label--truncate-description & {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}