/* ==========================================================================
 * Toggle
 * ========================================================================== */

.mds-c-toggle {
  --mds-v-toggle__bubble-background--primary: var(
    --mds-t-background-color--tertiary
  );
  --mds-v-toggle__bubble-background--active: var(
    --mds-t-background-color--accent
  );
  --mds-v-toggle__bubble-color: var(--mds-t-background-color--primary);
  --mds-v-toggle__padding: var(--mds-d-spacing--xs);
  --mds-v-toggle__size: 1rem;

  align-items: center;
  color: var(--mds-t-text-color--primary);
  display: inline-flex;
  justify-content: flex-start;
  margin: calc(var(--mds-v-toggle__padding) * -1);
  min-width: 0;
  padding: var(--mds-v-toggle__padding);
  position: relative;
  transition: color 0.1s ease-out;
  user-select: none;
  vertical-align: top;

  &--cursor {
    &-default {
      cursor: default;
    }

    &-pointer {
      cursor: pointer;
    }
  }

  &:enter {
    color: var(--mds-d-color-brand--primary);
  }

  &.mds-is-disabled {
    cursor: default;
    opacity: 0.4;
    pointer-events: none;
  }

  input {
    @mixin mds-m-screenreader-text;

    display: block;
    opacity: 0;
  }
}

/* ==========================================================================
 * Label
 * ========================================================================== */

.mds-c-toggle__label {
  @mixin mds-m-label--size-med;

  margin-bottom: -2px;
  margin-left: var(--mds-d-spacing--sm);
  margin-top: -2px;
  pointer-events: none;

  &:empty {
    display: none;
  }

  &--hidden {
    @mixin mds-m-screenreader-text;
  }

  .mds-c-toggle--size-lg & {
    margin-top: 0;
  }

  &--size-lg {
    @mixin mds-m-heading--size-lg;
  }

  &--size-xl {
    @mixin mds-m-heading--size-xl;
  }

  &--size-xxl {
    @mixin mds-m-heading--size-xxl;
  }

  &--size-normal {
    @mixin mds-m-text--size-med;
  }
}

/* ==========================================================================
 * Toggle Mixin (Applies to all Toggles)
 * ========================================================================== */

:root {
  /* stylelint-disable-next-line */
  --mds-c-toggle__bubble {
    --color: var(--mds-v-toggle__bubble-color);
    --border-color: var(--mds-v-toggle__bubble-background--primary);
    --box-shadow: 0 0 0 2px var(--border-color) inset;

    background-color: var(--background-color, transparent);
    background-position: center;
    background-size: calc(var(--mds-v-toggle__size) * 0.8);
    box-shadow: var(--box-shadow);
    display: block;
    flex-shrink: 0;
    height: var(--mds-v-toggle__size);
    left: 0;
    pointer-events: none;
    position: relative;
    width: var(--mds-v-toggle__size);

    input:focus-visible + & {
      outline: 2px solid var(--mds-d-color-brand--primary);
      outline-offset: 1px;
    }

    input:checked + & {
      &:not(.mds-c-toggle__blocked) {
        --background-color: var(--mds-v-toggle__bubble-background--active);
        --border-color: var(--mds-v-toggle__bubble-background--active);
      }
    }
  }
}

/* ==========================================================================
 * Toggle - Blocked
 * ========================================================================== */
.mds-c-toggle__blocked {
  @apply --mds-c-toggle__bubble;

  background-image: svg-load(
    '../../momentum-icons/dist/svg/circle-forwardslash.svg',
    fill: $color-ui--4
  );
  background-size: calc(var(--mds-v-toggle__size) * 1);
  border-radius: 50%;
  box-shadow: none;
}

/* ==========================================================================
 * Toggle - Checkbox
 * ========================================================================== */

.mds-c-toggle__checkbox {
  @apply --mds-c-toggle__bubble;

  border-radius: var(--mds-d-border-radius--default);

  --border-color: var(--mds-t-border-color--inverse-primary);

  .mds-has-changes & {
    --border-color: var(--mds-t-border-color--inverse-primary);
  }

  &:not(input:checked) {
    background-color: var(--mds-t-background-color--primary);
  }

  input:checked + & {
    background-color: var(--mds-v-toggle__bubble-background--active);
    background-image: svg-load(
      '../../momentum-icons/dist/svg/check.svg',
      fill: #fff
    );
  }
}

/* ==========================================================================
 * Toggle - Chircle
 * ========================================================================== */

.mds-c-toggle__chircle {
  @apply --mds-c-toggle__bubble;

  --background-color: var(--mds-v-toggle__bubble-background--primary);

  background-image: svg-load(
    '../../momentum-icons/dist/svg/check.svg',
    fill: $color-ui--5
  );
  border-radius: 50%;

  input:checked + & {
    background-image: svg-load(
      '../../momentum-icons/dist/svg/check.svg',
      fill: #fff
    );
  }

  /* stylelint-disable-next-line */
  .mds-c-toggle--locked & {
    --background-color: var(--mds-t-background-color--inverse-primary);
    --border-color: var(--mds-t-background-color--inverse-primary);

    background-image: svg-load(
      '../../momentum-icons/dist/svg/lock.svg',
      fill: $color-ui--4
    );
    background-position: center 1px;
    background-size: calc(var(--mds-v-toggle__size) * 0.8);
  }
}

/* ==========================================================================
 * Toggle - Notification
 * ========================================================================== */
.mds-c-toggle__notification {
  @apply --mds-c-toggle__bubble;

  --background-color: var(--mds-v-toggle__bubble-background--primary);
  --mds-v-toggle__padding: var(--mds-d-spacing--med);

  background-image: svg-load(
    '../../momentum-icons/dist/svg/dot.svg',
    fill: $color-slate--50
  );
  background-position: center 1px;
  border-radius: 50%;
  left: 8px;
  top: 6px;

  input:checked + & {
    background-image: svg-load(
      '../../momentum-icons/dist/svg/dot.svg',
      fill: $brand-color--primary
    );
  }

  :not(input:checked) + & {
    --border-color: var(--mds-t-border-color--inverse-primary);
  }
}

/* ==========================================================================
 * Toggle - Radio
 * ========================================================================== */

.mds-c-toggle__radio {
  @apply --mds-c-toggle__bubble;

  border-radius: 50%;

  .mds-has-changes & {
    --border-color: var(--mds-t-border-color--primary);
  }

  input:checked + & {
    --box-shadow: 0 0 0 4px var(--border-color) inset;

    &::after {
      background-color: var(--mds-v-toggle__bubble-color);
      border-radius: 50%;
      content: '';
      display: block;
      height: 50%;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
    }
  }

  :not(input:checked) + & {
    background-color: var(--mds-t-background-color--primary);
  }
}

/* ==========================================================================
 * Toggle - Switch
 * ========================================================================== */

.mds-c-toggle__switch {
  @apply --mds-c-toggle__bubble;

  --background-color: var(--mds-v-toggle__bubble-background--primary);

  background-image: none;
  border-radius: 100px;
  transition-duration: 0.2s;
  transition-property: background-color, box-shadow;
  transition-timing-function: ease;
  width: calc(var(--mds-v-toggle__size) * 2);

  &::before {
    background-color: var(--mds-v-toggle__bubble-color);
    border-radius: 100px;
    box-shadow:
      0 1px 1px 1px rgb(0 0 0 / 8%),
      0 4px 1px 1px rgb(0 0 0 / 4%);
    content: '';
    display: block;
    height: calc(var(--mds-v-toggle__size) - 2px);
    left: 1px;
    padding: 1px;
    position: absolute;
    top: 1px;
    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    width: calc(var(--mds-v-toggle__size) - 2px);
  }

  .mds-c-toggle:active &::before {
    width: calc(var(--mds-v-toggle__size) * 1.25);
  }

  input:checked + & {
    /* stylelint-disable-next-line */
    &::before {
      left: calc(100% - 1px);
      transform: translateX(-100%);
    }

    .mds-c-toggle:active &::before {
      /* stylelint-disable-line selector-max-specificity */
      width: calc(var(--mds-v-toggle__size) * 1.25);
    }
  }
}