//
// Copyright 2017 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

/** postcss-bem-linter: define icon-toggle */

@import "@material/animation/functions";
@import "@material/ripple/mixins";
@import "@material/theme/mixins";

.mdc-icon-toggle {
  @include mdc-theme-prop(color, text-secondary-on-light);
  @include mdc-ripple-base;
  // NOTE: The spec denotes specific opacity values to use for different styles of icon buttons,
  // either "light", "dark", or "color". Because ripples are made up of two distinct elements,
  // we need to use an opacity value such that when two elements of the same color and opacity are
  // layered on top of one another, they create the opacity specified in the spec.
  // This is done by using the painter's compositing algorithm:
  //
  // alpha[desired] = alpha[a] + alpha[b](1 - alpha[a]).
  //
  // Because both alpha values are the same this reduces to:
  //
  // alpha[desired] = alpha[a] + alpha[a](1 - alpha[a]).
  //
  // We simply solve this quadratic equation for the nonnegative root between [0, 1].
  // E.g. for black 12% opacity:
  // https://www.wolframalpha.com/input/?i=x+%2B+x(1+-+x)+%3D+.12,+x+%3C%3D+1,+x+%3E%3D+0
  @include mdc-ripple-bg((pseudo: "::before", opacity: .062));
  @include mdc-ripple-fg((pseudo: "::after", opacity: .062));

  @include mdc-theme-dark(".mdc-icon-toggle", true) {
    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
  }

  // For some reason, GPU layer promotion makes ripples look terrible on Chrome
  will-change: initial;
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  outline: none;
  font-size: 1.5rem;
  cursor: pointer;
  user-select: none;

  &::after {
    position: absolute;
    border-radius: 50%;
    content: "";
    opacity: 0;
    pointer-events: none;
  }

  @include mdc-theme-dark {
    @include mdc-theme-prop(color, text-primary-on-dark);
  }
}

.mdc-icon-toggle--primary {
  @include mdc-theme-prop(color, primary);
  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
}

.mdc-icon-toggle--accent {
  @include mdc-theme-prop(color, accent);
  @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .14));
  @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .14));
}

.mdc-icon-toggle--disabled {
  @include mdc-theme-prop(color, text-disabled-on-light);

  pointer-events: none;

  @include mdc-theme-dark(".mdc-icon-toggle", true) {
    @include mdc-theme-prop(color, text-disabled-on-dark);
  }
}

/** postcss-bem-linter: end */