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

.toggle-container {
  $toggle-container: &;

  display: grid;
  grid-template: 'toggle label' auto / min-content auto;
  column-gap: spacers.getSpacer(xs);
  max-width: 43.5rem;

  &--position-right {
    grid-template: 'label toggle' auto / auto min-content;
  }

  &--with-status {
    --status-column-size: 5.5rem;

    grid-template: 'toggle label' auto / var(--status-column-size) auto;

    &.toggle-container--position-right {
      grid-template: 'label toggle' auto / auto var(--status-column-size);
    }

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      --status-column-size: 6.25rem;
    }
  }

  &__row {
    display: flex;
    align-items: center;

    &--right {
      width: 100%;
      justify-content: space-between;
    }
  }

  &__outer-label {
    grid-area: label;
    margin-top: 0.5rem;
  }

  &__outer-toggle {
    grid-area: toggle;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
  }

  &__label {
    @include fonts.label;

    color: var(--core-color-neutral-900);

    &__text--subdued {
      @include fonts.label-subdued;
    }

    #{$toggle-container}--disabled & {
      color: var(--color-disabled-text);
    }
  }

  &__sublabel {
    grid-area: sublabel;
    font-size: font-settings.$font-size-xs;
    line-height: 1.25rem;
    color: var(--core-color-neutral-800);
    text-align: left;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
      font-size: font-settings.$font-size-sm;
      line-height: font-settings.$lineheight-size-xs;
      text-align: left;
    }

    #{$toggle-container}--disabled & {
      color: var(--color-disabled-text);
    }
  }

  &__status {
    @include fonts.sublabel;

    word-break: break-all;

    &--checked {
      color: var(--color-action-text-onlight);
    }

    #{$toggle-container}--disabled & {
      color: var(--color-disabled-text);
    }
  }

  &__toggle-group {
    grid-area: input;
    place-self: center;
    display: flex;
    align-items: center;
    cursor: pointer;
    min-height: 2.75rem;

    #{$toggle-container}--disabled & {
      cursor: not-allowed;
    }
  }

  &__toggle {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.75rem;
    background-color: var(--color-base-background-white);
    border-radius: 60px;
    border: 2px solid var(--color-base-border-onlight-emphasized);

    #{$toggle-container}--disabled & {
      color: var(--color-disabled-border);
      border-style: dashed;
    }

    &--on-white {
      background-color: var(--core-color-neutral-50);
    }

    &--ignore-hover {
      pointer-events: none;
    }

    &__dot {
      content: '';
      position: absolute;
      width: 1.125rem;
      height: 1.125rem;
      left: 3px;
      bottom: 3px;
      background-color: var(--brandcolor-neutral-dark);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      &--ignore-hover {
        pointer-events: none;
      }

      &__icon {
        opacity: 0;
        stroke: var(--color-action-graphics-onlight);

        #{$toggle-container}--disabled & {
          stroke: var(--core-color-white);
        }
      }
    }
  }

  &__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;

    &:focus-visible + .toggle-container__toggle {
      border-color: var(--color-action-border-onlight-focus);
      outline: 2px solid var(--color-action-border-onlight-focus);

      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 60px;
        border: 1px solid var(--color-action-border-ondark-focus);
      }
    }
  }
}