@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;

@import '@viasat/beam-tokens/components/Label';

$labelBaseClass: '#{constants.$prefix}label';

$labelCursor: '--#{constants.$prefix}comp-label-cursor';
$labelSpaceBottom: '--#{constants.$prefix}comp-label-space-bottom';
$labelPointerEvents: '--#{constants.$prefix}comp-label-pointer-events';

.#{$labelBaseClass} {
  color: tokens.$bm-comp-label-color-text;
  font: tokens.$bm-comp-label-typo-default;
  margin-bottom: var(#{$labelSpaceBottom}, tokens.$bm-sem-space-0);

  label {
    cursor: var(#{$labelCursor}, default);
    pointer-events: var(#{$labelPointerEvents}, inherit);
  }

  &--disabled label {
    opacity: tokens.$bm-sem-opacity-disabled;
  }

  &--required label {
    &:after {
      content: '*';
      color: tokens.$bm-sem-color-text-negative;
    }

    &:has(:last-child) {
      &:after {
        content: '';
      }

      & > *:last-child:after {
        content: '*';
        color: tokens.$bm-sem-color-text-negative;
      }
    }
  }

  &__optional {
    font: tokens.$bm-comp-label-typo-optional;
    margin-left: tokens.$bm-comp-label-space-gap;
  }

  &__tooltip {
    vertical-align: top;
    display: inline-block;
    margin-inline-start: tokens.$bm-comp-label-space-gap;

    button {
      color: tokens.$bm-comp-tooltip-color-icon-trigger;
    }

    svg {
      height: tokens.$bm-comp-label-size-icon;
      width: tokens.$bm-comp-label-size-icon;
    }
  }

  &--no-box {
    display: contents;
  }
}