@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 c-border-base c-border-2 c-text-base c-bg-secondary c-py-none c-px-md c-state-interactive c-transition;
    position: relative;

    display: flex;
    align-items: center;
    height: $height;
    box-sizing: border-box;

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

    border-radius: math.div($height, 2);

    &:hover {
      box-shadow: 0 4px 4px 0 rgba(#000, 0.16);

      transform: translateY(-1px);
    }

    &:after {
      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});

      border-radius: math.div($height, 2);
    }
  }

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

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

  &__Input:disabled + #{ $self }__Label {
    @apply c-border-base 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-accentAlt c-text-accentAlt c-border-accentAlt c-border-2;
  }

  &--with-icon {
    .cobalt-Icon {
      @include semantic-color(icon, base, fill);
      @apply c-mr-xs c-transition-colors;
    }

    #{ $self }__Input:checked + #{ $self }__Label .cobalt-Icon {
      @include semantic-color(icon, accentAlt, fill);
    }
  }

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

      .cobalt-Icon {
        @include semantic-color(icon, base, fill);
      }
    }

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

      .cobalt-Icon {
        @include semantic-color(icon, errorAlt, fill);
      }
    }
  }
}

.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;
    }
  }
}