//
// 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.
// 

// Sets 45-degree angle corners of a certain size (akin to border-radius but for flat corners).
@mixin mdc-shape-angled-corner($background-color, $top-left-size, $top-right-size: $top-left-size, $bottom-right-size: $top-left-size, $bottom-left-size: $top-right-size) {
  $corners: (top, left, $top-left-size),
    (top, right, $top-right-size),
    (bottom, right, $bottom-right-size),
    (bottom, left, $bottom-left-size);

  @each $y, $x, $size in $corners {
    @if $size > 0 {
      // Assume that the size passed represents the width/height rather than the diagonal.
      // This makes it trivial e.g. to accomplish a horizontal arrow cap by specifying exactly half the shape's height.
      // Unfortunately, Sass doesn't have built-in exponentiation, and node-sass custom functions seem to hang.
      // (https://github.com/sass/node-sass/issues/857 may be related, but the workaround didn't seem to work.)
      // Fortunately, if we assume 45 degree cutouts all the time, a^2 + b^2 = c^2 simplifies to a*sqrt(2).
      $diagonal-length: $size * 1.4142135623730951;

      .mdc-shape-container__corner--#{$y}-#{$x} {
        #{$y}: -$diagonal-length / 2;
        #{$x}: -$diagonal-length / 2;
        width: $diagonal-length;
        height: $diagonal-length;
      }
    }
  }

  @include mdc-shape-angled-corner-background($background-color);
}

// Sets the background color used for masking.
// Exposed separately to allow overriding for some shapes within a page which happen to be over a different background.
@mixin mdc-shape-angled-corner-background($background-color) {
  .mdc-shape-container__corner::after {
    background-color: $background-color;
  }
}

@mixin mdc-shape-angled-corner-outline($outline-width, $outline-color, $outline-style: solid) {
  .mdc-shape-container__corner::before {
    top: $outline-width;
    border-bottom: $outline-width $outline-style $outline-color;
  }
}