@use "../../styles/utils";
@use "./variables" as locals;

@include utils.layer {
  %shape {
    width: locals.$width;
    height: calc(locals.$thumbHeight + locals.$padY * 2);
    border-radius: locals.$radius;
  }

  .Block {
    @extend %shape;

    box-sizing: content-box;
    display: flex;
    border: locals.$borderWidth solid var(--cmm-Switch-border);
    border-radius: locals.$radius;
    position: relative;
  }

  .--sm {
    #{locals.$width_name}: 1.75rem;
    #{locals.$thumbWidth_name}: 0.75rem;
    #{locals.$thumbHeight_name}: 0.75rem;
    #{locals.$padX_name}: 0.1rem;
    #{locals.$padY_name}: 0.1rem;
    #{locals.$labelPadX_name}: 0.4rem;
    #{locals.$labelFontSize_name}: calc(var(--cmm-font-size-xs) * 0.8);
  }

  .--md {
    #{locals.$width_name}: 2.25rem;
    #{locals.$thumbWidth_name}: 1rem;
    #{locals.$thumbHeight_name}: 1rem;
    #{locals.$padX_name}: 0.1rem;
    #{locals.$padY_name}: 0.1rem;
    #{locals.$labelPadX_name}: 0.4rem;
    #{locals.$labelFontSize_name}: calc(var(--cmm-font-size-xs) * 0.9);
  }

  .--lg {
    #{locals.$width_name}: 3rem;
    #{locals.$thumbWidth_name}: 1.25rem;
    #{locals.$thumbHeight_name}: 1.25rem;
    #{locals.$padX_name}: 0.15rem;
    #{locals.$padY_name}: 0.15rem;
    #{locals.$labelPadX_name}: 0.4rem;
    #{locals.$labelFontSize_name}: var(--cmm-font-size-xs);
  }

  // Workaround until Firefox supports `:has()`
  .background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--cmm-Switch-bg-off);
    border-radius: locals.$radius;
    transition: var(--cmm-transition-bg);
  }

  %label {
    display: flex;
    position: absolute;
    z-index: 1;
    top: 50%;
    translate: 0 -50%;
    font-size: locals.$labelFontSize;
    font-weight: var(--cmm-font-weight-normal);
  }

  .off {
    @extend %label;

    right: locals.$labelPadX;
    color: var(--cmm-Switch-font-off);
  }

  .on {
    @extend %label;

    left: locals.$labelPadX;
    color: var(--cmm-Switch-font-on);
    display: none;
  }

  .label {
    @extend %shape;

    position: absolute;
  }

  .input {
    @extend %shape;

    appearance: none;
    position: absolute;
    cursor: pointer;
    z-index: 20;

    // Thumb
    & ~ .label::after {
      position: absolute;
      content: "";
      width: locals.$thumbWidth;
      height: locals.$thumbHeight;
      top: 50%;
      left: locals.$padX;
      translate: 0 -50%;
      background: var(--cmm-Switch-bg-thumb);
      border: locals.$borderWidth solid var(--cmm-Switch-border-thumb);
      border-radius: locals.$radius;
      transition: left 0.3s;
      z-index: 10;
    }

    &:checked {
      ~ .label::after {
        left: calc(100% - locals.$thumbWidth - locals.$padX);
      }

      ~ .background {
        background: var(--cmm-Switch-bg-on);
      }

      ~ .off {
        display: none;
      }

      ~ .on {
        display: flex;
      }
    }
  }
}
