@import '../core/style/variables';
@import '../core/ripple/ripple';
@import '../core/style/elevation';
@import '../core/style/vendor-prefixes';
@import '../../cdk/a11y/a11y';

$mat-slide-toggle-thumb-size: 20px !default;
$mat-slide-toggle-bar-border-radius: 8px !default;
$mat-slide-toggle-height: 24px !default;
$mat-slide-toggle-spacing: 8px !default;
$mat-slide-toggle-ripple-radius: 23px !default;
$mat-slide-toggle-bar-width: 36px !default;
$mat-slide-toggle-bar-height: 14px !default;
$mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-toggle-thumb-size;


.mat-slide-toggle {
  display: inline-block;
  height: $mat-slide-toggle-height;

  line-height: $mat-slide-toggle-height;

  white-space: nowrap;

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

  outline: none;

  &.mat-checked {
    .mat-slide-toggle-thumb-container {
      transform: translate3d($mat-slide-toggle-bar-track-width, 0, 0);
    }
  }

  &.mat-disabled {
    .mat-slide-toggle-label, .mat-slide-toggle-thumb-container {
      cursor: default;
    }
  }
}

// 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.
.mat-slide-toggle-label {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  height: inherit;

  cursor: pointer;
}

/* If the label should be placed before the thumb then we just change the orders. */
.mat-slide-toggle-label-before {
  .mat-slide-toggle-label { order: 1; }
  .mat-slide-toggle-bar { order: 2; }
}

// Apply the margin for slide-toggles and revert it for RTL toggles with labelPosition before.
[dir='rtl'] .mat-slide-toggle-label-before .mat-slide-toggle-bar,
.mat-slide-toggle-bar {
  margin-right: $mat-slide-toggle-spacing;
  margin-left: 0;
}

// Switch the margins in RTL mode and also switch it if the labelPosition is set to before.
[dir='rtl'],
.mat-slide-toggle-label-before {
  .mat-slide-toggle-bar {
    margin-left: $mat-slide-toggle-spacing;
    margin-right: 0;
  }
}

.mat-slide-toggle-bar-no-side-margin {
  margin-left: 0;
  margin-right: 0;
}

// The thumb container is responsible for the dragging functionality.
// The container includes the visual thumb and the ripple container element.
.mat-slide-toggle-thumb-container {
  $thumb-bar-vertical-padding: ($mat-slide-toggle-thumb-size - $mat-slide-toggle-bar-height) / 2;

  position: absolute;
  z-index: 1;

  width: $mat-slide-toggle-thumb-size;
  height: $mat-slide-toggle-thumb-size;
  top: -$thumb-bar-vertical-padding;
  left: 0;

  transform: translate3d(0, 0, 0);
  transition: $swift-linear;
  transition-property: transform;

  @include cursor-grab;

  // Once the thumb container is being dragged around, we remove the transition duration to
  // make the drag feeling fast and not delayed.
  &.mat-dragging, &:active {
    @include cursor-grabbing;

    transition-duration: 0ms;
  }
}

// The visual thumb element that moves inside of the thumb bar.
// The parent thumb-container container is responsible for the movement of the visual thumb.
.mat-slide-toggle-thumb {
  height: $mat-slide-toggle-thumb-size;
  width: $mat-slide-toggle-thumb-size;
  border-radius: 50%;

  @include mat-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 movable thumb element.
.mat-slide-toggle-bar {
  position: relative;

  width: $mat-slide-toggle-bar-width;
  height: $mat-slide-toggle-bar-height;

  border-radius: $mat-slide-toggle-bar-border-radius;

  @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.
.mat-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: $mat-slide-toggle-thumb-size / 2;
}

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

// Ripple positioning for the slide-toggle. Moves the ripple container into the center of the thumb.
.mat-slide-toggle-ripple {
  position: absolute;
  top: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius;
  left: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius;
  height: $mat-slide-toggle-ripple-radius * 2;
  width: $mat-slide-toggle-ripple-radius * 2;
  z-index: 1;
  pointer-events: none;
}