@use "sass:math";

.cobalt-CheckablePillField {
  $self: &;
  $height: 40px;
  $toggle-switch-focus-offset: math.div($height, 10);

  position: relative;

  &__LabelWrapper {
    display: inline-block;

    margin: 4px 0;

    cursor: pointer;
  }

  &__Input {
    position: absolute;

    width: 0;
    height: 0;
    margin: 0;
    padding: 0;

    opacity: 0;
  }

  &__Label {
    @apply cobalt-button;
    @apply c-text-onSurface c-font-regular c-font-base;
    position: relative;

    display: flex;
    align-items: center;
    height: $height;

    // We remove the border-bottom and border-top width
    line-height: $height - 2px * 2;

    &:after {
      @apply c-rounded-lg;
      top: -1 * $toggle-switch-focus-offset;
      left: -1 * $toggle-switch-focus-offset;

      height: calc(100% + #{($toggle-switch-focus-offset) * 2});
      width: calc(100% + #{($toggle-switch-focus-offset) * 2});
    }
  }

  &__Input:focus + #{ $self }__Label:after {
    // Color the shadow by using default text color
    @apply c-text-primary;
    position: absolute;

    box-shadow: 0 0 0 1px;
    content: "";
  }

  &__Input:disabled + #{ $self }__Label {
    @apply c-border-outline c-border-2 c-bg-disabled c-state-none;

    cursor: default;
    box-shadow: none;
    opacity: 0.8;

    transform: none;
  }

  &__Input:checked + #{ $self }__Label {
    @apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer c-border c-outline c-outline-1;
  }

  &--with-icon {
    .cobalt-Icon {
      @apply c-fill-onSurface;
      @apply c-mr-xs c-transition-colors;
    }

    #{ $self }__Input:checked + #{ $self }__Label .cobalt-Icon {
      @apply c-fill-onPrimaryContainer;
    }
  }

  &--error {
    #{ $self }__Input + #{ $self }__Label {
      @apply c-border-error c-text-onSurface c-bg-surfaceBright;

      .cobalt-Icon {
        @apply c-fill-onSurface;
      }
    }

    #{ $self }__Input:checked + #{ $self }__Label {
      @apply c-text-onErrorContainer c-bg-errorContainer c-border-onErrorContainer;

      .cobalt-Icon {
        @apply c-fill-onErrorContainer;
      }
    }
  }
}

.cobalt-CheckablePillsGroup {
  @include form-field-container;

  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;

  .cobalt-CheckablePillField {
    @apply c-mr-sm;

    &--with-icon {
      white-space: nowrap;
    }
  }
}