@import '../core/style/variables';
@import '../core/ripple/ripple';
@import '../core/style/elevation';
@import '../core/a11y/a11y';


$md-slide-toggle-width: 36px !default;
$md-slide-toggle-height: 24px !default;
$md-slide-toggle-bar-height: 14px !default;
$md-slide-toggle-thumb-size: 20px !default;
$md-slide-toggle-margin: 16px !default;
$md-slide-toggle-spacing: 8px !default;


@mixin md-switch-ripple() {
  // Temporary ripple effect for the thumb of the slide-toggle.
  // Bind to the parent selector and specify the current palette.
  @include md-temporary-ink-ripple(slide-toggle, true);
}

md-slide-toggle {
  display: flex;
  height: $md-slide-toggle-height;

  margin: $md-slide-toggle-margin 0;
  line-height: $md-slide-toggle-height;

  white-space: nowrap;

  // Disable user selection to ensure that dragging is smooth without grabbing
  // some elements accidentally.
  user-select: none;

  outline: none;

  &.md-checked {
    .md-slide-toggle-thumb-container {
      transform: translate3d(100%, 0, 0);
    }
  }

  @include md-switch-ripple();

  &.md-disabled {

    .md-slide-toggle-label, .md-slide-toggle-container {
      cursor: default;
    }
  }
}

// The content element is responsible for the users content.
// It will apply the given typography styles and align at the end of the slide-toggle.
.md-slide-toggle-content {
  font-size: $md-body-font-size-base;
  font-family: $md-font-family;
  font-weight: 500;
}

// The label element is our root container for the slide-toggle / switch indicator and label text.
// It has to be a label, to support accessibility for the visual hidden input.
.md-slide-toggle-label {
  display: flex;
  flex: 1;

  cursor: pointer;
}

// Container for the composition of the slide-toggle / switch indicator.
.md-slide-toggle-container {
  cursor: grab;
  width: $md-slide-toggle-width;
  height: $md-slide-toggle-height;

  position: relative;

  margin-right: $md-slide-toggle-spacing;

  [dir='rtl'] & {
    margin-left: $md-slide-toggle-spacing;
    margin-right: 0;
  }
}

// The thumb container is responsible for the dragging functionality.
// It moves around and holds the actual circle as a thumb.
.md-slide-toggle-thumb-container {
  position: absolute;
  top: $md-slide-toggle-height / 2 - $md-slide-toggle-thumb-size / 2;
  left: 0;
  z-index: 1;

  width: $md-slide-toggle-width - $md-slide-toggle-thumb-size;

  transform: translate3d(0, 0, 0);

  transition: $swift-linear;
  transition-property: transform;

  // Once the thumb container is being dragged around, we remove the transition duration to
  // make the drag feeling fast and not delayed.
  &.md-dragging {
    transition-duration: 0ms;
  }
}

// The thumb will be elevated from the slide-toggle bar.
// Also the thumb is bound to its parent thumb-container, which manages the movement of the thumb.
.md-slide-toggle-thumb {
  position: absolute;
  margin: 0;
  left: 0;
  top: 0;

  height: $md-slide-toggle-thumb-size;
  width: $md-slide-toggle-thumb-size;
  border-radius: 50%;

  @include md-elevation(1);

  @include cdk-high-contrast {
    background: #fff;
    border: solid 1px #000;
  }
}

// Horizontal bar for the slide-toggle.
// The slide-toggle bar is shown behind the thumb container.
.md-slide-toggle-bar {
  position: absolute;
  left: 1px;
  top: $md-slide-toggle-height / 2 - $md-slide-toggle-bar-height / 2;

  width: $md-slide-toggle-width - 2px;
  height: $md-slide-toggle-bar-height;

  border-radius: 8px;

  @include cdk-high-contrast {
    background: #fff;
  }
}

// The slide toggle shows a visually hidden input inside of the component, which is used
// to take advantage of the native browser functionality.
.md-slide-toggle-input {
  // Move the input to the bottom and in the middle of the thumb.
  // Visual improvement to properly show browser popups when being required.
  bottom: 0;
  left: $md-slide-toggle-thumb-size / 2;
}

.md-slide-toggle-bar,
.md-slide-toggle-thumb {
  transition: $swift-linear;
  transition-property: background-color;
  transition-delay: 50ms;
}