//
// Copyright 2019 Stijn de Witt. Some rights reserved.
// Licensed under the MIT Open Source license. 
// https://opensource.org/licenses/MIT
// See LICENSE for details.
//
// Based on code copyright 2018 Google Inc. All Rights Reserved.
// Licensed under the Apache License, Version 2.0.
// http://www.apache.org/licenses/LICENSE-2.0
// See LICENSE-MDC for details.
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under these licenses is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the licenses for the specific language governing permissions and
// limitations under these licenses.
// 

@import "../elevation/mixins";
@import "./functions";
@import "./mixins";
@import "./variables";

// postcss-bem-linter: define switch
.mdc-switch {
  display: inline-block;
  position: relative;

  &__native-control {
    @include mdc-switch-tap-target_;

    display: inline-block;
    margin-top: $mdc-switch-knob-vertical-offset_;
    transition: mdc-switch-transition(transform);
    opacity: 0;
    cursor: pointer;
    z-index: 2;

    &:checked {
      transform: translateX($mdc-switch-knob-active-margin);
    }
  }
}

@at-root {
  @include mdc-switch-unchecked-track-color_($mdc-switch-unchecked-track-color);
  @include mdc-switch-unchecked-knob-color_($mdc-switch-unchecked-knob-color);
  @include mdc-switch-unchecked-focus-indicator-color_($mdc-switch-unchecked-focus-ring-color);
  @include mdc-switch-track-color($mdc-switch-baseline-theme-color);
  @include mdc-switch-knob-color($mdc-switch-baseline-theme-color);
  @include mdc-switch-focus-indicator-color($mdc-switch-baseline-theme-color);
}

.mdc-switch__background {
  display: block;
  position: relative;
  width: $mdc-switch-track-width;
  height: $mdc-switch-track-height;
  border-radius: 50%;
  outline: none;
  user-select: none;

  // Track
  &::before {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition:
      mdc-switch-transition(opacity),
      mdc-switch-transition(background-color);
    border-radius: 7px;
    opacity: .38;
    content: "";
  }
}

.mdc-switch__knob {
  @include elevation(2);

  display: block;
  position: absolute;
  top: $mdc-switch-knob-vertical-offset_;
  left: 0;
  width: $mdc-switch-knob-diameter;
  height: $mdc-switch-knob-diameter;
  transform: translateX(0);
  transition:
    mdc-switch-transition(transform),
    mdc-switch-transition(background-color);
  border-radius: 50%;
  z-index: 1;

  // Focus indicator
  &::before {
    @include mdc-switch-tap-target_;

    transform: scale(0);
    transition:
      mdc-switch-transition(transform),
      mdc-switch-transition(background-color);
    border-radius: 50%;
    opacity: .2;
    content: "";
  }
}

// Focus indicator
.mdc-switch__native-control:focus ~ .mdc-switch__background .mdc-switch__knob::before {
  transform: scale(1);
}

.mdc-switch__native-control:checked ~ .mdc-switch__background {
  // Track
  &::before {
    opacity: .5;
  }

  .mdc-switch__knob {
    transform: translateX($mdc-switch-knob-active-margin);

    // Focus indicator
    &::before {
      opacity: .15;
    }
  }
}

// postcss-bem-linter: end

.mdc-switch__native-control:disabled {
  cursor: initial;
}

.mdc-switch__native-control:disabled ~ .mdc-switch__background {
  // Track
  &::before {
    background-color: $mdc-switch-unchecked-track-color;
    opacity: .12;
  }

  .mdc-switch__knob {
    background-color: $mdc-switch-disabled-knob-color;
  }
}