@use 'sass:math';
@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((switch))} {
  font-size: #{getValName((switch, font-size))};
  cursor: pointer;
  display: inline-flex;
  line-height: 1;
  align-items: center;
  justify-content: center;
  padding: 0em;
  min-height: 2.2em;
  #{getClassName((switch, input))} {
    display: flex;
    align-items: center;
    height: 1.8em;
    border-radius: 2em;
    background-color: #{getValName((switch, background-color))};
    transition: .3s all;
    position: relative;
  }
  input {
    display: none;
  }
  &.is-disabled {
    cursor: not-allowed;
    #{getClassName((switch, input))} {
      background-color: #{getValName((switch, disabled-background-color))};
    }
  }
  &.is-checked {
    #{getClassName((switch, input))} {
      background-color: #{getValName((switch, checked-background-color))};
    }
    #{getClassName((switch, label))} {
      padding: .4em 2em .4em .8em;
    }
    #{getClassName((switch, input, box))} {
      left: calc(100% - 1.6em);
    }
  }
  &.is-checked.is-disabled {
    #{getClassName((switch, input))} {
      background-color: #{getValName((switch, checked-disabled-background-color))};
    }
  }
  &:active {
    #{getClassName((switch, input, box))} {
      transform: scaleX(1.2);
      transform-origin: left center;
    }
  }
  &.is-checked:active {
    #{getClassName((switch, input, box))} {
      transform-origin: right center;
    }
  }
}

#{getClassName((switch, input, box))} {
  background-color: #{getValName((color, neutral, 0))};
  width: 1.4em;height:1.4em;border-radius: 100%;display:flex;
  align-items: center;
  justify-content: center;
  left: .2em;
  transition: .3s all;
  position: absolute;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
}
#{getClassName((switch, label))} {
  color: #{getValName((color, neutral, 0))};
  transition: .3s all;
  // padding: 1px 8px 1px calc(1em + 4px);
  padding: .4em .8em .4em 2em;
  min-width: 3.6em;
}

#{getClassName((switch))} {
  @include set-css-val(
    switch,
    (
      'font-size': (heading8),
      'background-color': (color, neutral, 3),
      'checked-background-color': (color, primary),
      'disabled-background-color': (color, neutral, 2),
      'checked-disabled-background-color': (color, neutral, 7),
    )
  )
}

#{getClassName((switch, large))} {
  @include set-css-val(
    switch,
    (
      'font-size': (heading7)
    )
  );
}

#{getClassName((switch, mini))} {
  @include set-css-val(
    switch,
    (
      'font-size': (heading9)
    )
  );
}