@use 'sass:map';
@use '../../../scss/screen-reader' as *;
@use '../../../scss/breakpoints' as breakpoints;
@use '../../../scss/font-mixins' as fonts;
@import '../../../scss/supernova/styles/colors.css';
@import '../../../scss/supernova/styles/spacers.css';

.visual-checkbox {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-height: 2.75rem;
  padding: 0.313rem 0;
  cursor: pointer;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    padding: 0;
  }

  &__input {
    // Hides input while making sure screen reader outline wraps the entire component
    cursor: pointer;
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    outline: none;
    appearance: none;
  }

  &__pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--core-space-2xs);
    box-sizing: border-box;
    min-height: var(--core-space-l);
    padding: var(--core-space-3xs) 1.75rem;
    border-radius: 100px;
    background-color: var(--color-action-background-ondark);
    border: 1px solid var(--color-action-border-onlight);
    color: var(--color-base-text-onlight);

    @include fonts.title6;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      min-height: var(--core-space-xl);
      padding: var(--core-space-3xs) var(--core-space-l);
    }
  }

  &:hover &__pill {
    background-color: var(--color-action-background-ondark-hover);
    border-color: var(--color-action-border-onlight-hover);
  }

  &:active &__pill {
    background-color: var(--color-action-background-ondark-selected);
    border-color: var(--color-action-border-onlight-hover);
  }

  &--checked &__pill {
    background-color: var(--color-action-background-onlight);
    color: var(--color-action-text-ondark);
    border-color: var(--color-action-background-onlight);
    padding: var(--core-space-3xs) var(--core-space-s);

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      padding: var(--core-space-3xs) 1.25rem;
    }
  }

  &--checked:hover &__pill {
    background-color: var(--color-action-graphics-onlight-hover);
    border-color: var(--color-action-graphics-onlight-hover);
  }

  &--checked:active &__pill {
    background-color: var(--color-action-background-onlight-active);
    border-color: var(--color-action-background-onlight-active);
  }

  &--invalid &__pill {
    background-color: var(--color-action-background-ondark);
    border-color: var(--color-destructive-border-normal);
  }

  &--invalid:hover &__pill {
    background-color: var(--color-destructive-background-normal);
    border-color: var(--color-destructive-border-normal);
  }

  &--invalid:active &__pill {
    background-color: var(--color-destructive-background-emphasized);
    border-color: var(--color-destructive-border-normal);
  }

  &--invalid#{&}--checked &__pill {
    background-color: var(--color-destructive-graphics-normal);
    border-color: var(--color-destructive-graphics-normal);
  }

  &--invalid#{&}--checked:hover &__pill {
    background-color: var(--color-destructive-graphics-hover);
    border-color: var(--color-destructive-graphics-hover);
  }

  &--invalid#{&}--checked:active &__pill {
    background-color: var(--color-destructive-graphics-emphasized-onlight);
    border-color: var(--color-destructive-graphics-emphasized-onlight);
  }

  &__input:focus-visible + &__pill {
    outline: 3px solid var(--color-action-border-onlight-focus);
    border-color: var(--color-action-border-ondark);
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    svg {
      fill: var(--color-action-graphics-ondark);
    }
  }

  &__label {
    text-box: trim-both cap alphabetic;
  }
}