@import '../responsive';

:host {
  @width: unit((52 * @scale), px);
  @height: round(((@control-height * @control-scale-small) * @scale));
  @switch-margin: 1px;
  @switch-width: round(((@width / 2) - (@switch-margin * 2)));
  @label-padding: 3px;
  // Padding left/right include the switch button, use for align the label to center
  @switching-padding: unit((@switch-width + @switch-margin + @label-padding), px);

  .touch-action();
  font-size: @control-font-size;
  color: if(lightness(@control-background-color) > 50%, @control-text-color, @color-white);
  width: @width;
  height: @height;
  line-height: unit((@height - (@label-padding * 2)), px);
  background-color: @control-background-color;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  outline: none;
  border-radius: @button-border-radius;
  box-shadow: inset 0 0 (@global-box-shadow-blur-radius * 0.75) @global-box-shadow-color;
  transition: box-shadow @global-transition-duration @global-transition-easing,
    border-color @global-transition-duration @global-transition-easing;
  user-select: none;

  [part='toggle'] {
    cursor: pointer;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid @control-border-color;
    border-radius: inherit;
    text-overflow: inherit;
    overflow: inherit;

    &::after {
      content: '';
      position: absolute;
      top: @switch-margin;
      left: @switch-margin;
      width: calc(50% - @switch-margin);
      height: calc(100% - (@switch-margin * 2));
      background-color: if(
        lightness(@control-background-color) > 50%,
        @color-aluminium,
        lighten(@color-slate, 10%)
      );
      box-sizing: border-box;
      border-radius: inherit;
    }
  }

  &[label],
  &[checked-label] {
    width: unit((@width * @control-scale-large), px);
    min-width: @width;

    &[checked] [part='toggle'] {
      padding-right: @switching-padding;
      padding-left: @label-padding;
    }

    [part='toggle'] {
      padding: @label-padding;
      padding-left: @switching-padding;

      &::after {
        width: @switch-width;
      }
    }
  }

  &[readonly] [part='toggle'] {
    cursor: default;
  }

  &[disabled] [part='toggle'] {
    opacity: 0.5;
  }

  &[checked] [part='toggle']::after {
    right: @switch-margin;
    left: auto;
    border-color: @scheme-color-primary;
    background-color: @scheme-color-primary;
  }

  .desktop-specific({
    &:hover:not([readonly]), &[focused=visible] {
      box-shadow: 0 0 (@global-box-shadow-blur-radius * 0.75) @input-focused-border-color;
      [part=toggle] {
        border-color: @input-focused-border-color;
      }
    }
  });
}