//
// 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 "../animation/variables";
@import "../ripple/common";
@import "../ripple/mixins";
@import "../theme/variables"; // for mdc-theme-accessible-ink-color
@import "../theme/mixins";
@import "./variables";

//
// Public
//

@mixin appbar-ink-color($color) {
  @include mdc-theme-prop(color, $color);
}

@mixin appbar-fill-color($color) {
  @include mdc-theme-prop(background-color, $color);
}

@mixin appbar-fill-color-accessible($color) {
  @include appbar-fill-color($color);
  @include appbar-ink-color(mdc-theme-accessible-ink-color($color));
}

@mixin appbar-icon-ink-color($color) {
  .action {
    @include mdc-theme-prop(color, $color);
    @include mdc-states($color);
  }
}

@mixin appbar-short-border-radius($border-radius: $appbar-short-collapsed-border-radius) {
  @include mdc-rtl-reflexive_(border-bottom-left-radius, 0, border-bottom-right-radius, $border-radius);
}

@mixin appbar-mobile-breakpoint_($mobile-breakpoint: $appbar-mobile-breakpoint) {
  @media (max-width: $mobile-breakpoint) {
    .solids .appbar {
      >div {
        height: $appbar-mobile-row-height;
        >section {
          padding: $appbar-mobile-section-padding $appbar-mobile-section-padding $appbar-mobile-section-padding 0;
          .anchor > input[type=checkbox]:checked ~ label {
            top: -$appbar-mobile-section-padding;
            padding-top: $appbar-mobile-section-padding;
          }
          .title {
            @include mdc-rtl-reflexive-box(padding, left, $appbar-mobile-title-left-padding);
          }
          &.start {
            @include mdc-rtl-reflexive-box(margin, left, $appbar-mobile-section-padding);
            &.reserve {
              @include mdc-rtl-reflexive-box(margin, left, $icon-size + $appbar-mobile-section-padding);
            }
          }
          &.end {
            @include mdc-rtl-reflexive-box(margin, right, $appbar-mobile-section-padding);
            padding: $appbar-mobile-section-padding 0 $appbar-mobile-section-padding $appbar-mobile-section-padding;
            .anchor {
              &:nth-child(1) > input[type=checkbox]:checked ~ label {
                left: calc(-100vw + 48px + #{$appbar-mobile-section-padding});
                padding-left: calc(100vw - 48px - #{$appbar-mobile-section-padding});
              }
              &:nth-child(2) > input[type=checkbox]:checked ~ label {
                left: calc(-100vw + 96px + #{$appbar-mobile-section-padding});
                padding-left: calc(100vw - 96px - #{$appbar-mobile-section-padding});
              }
              &:nth-child(3) > input[type=checkbox]:checked ~ label {
                left: calc(-100vw + 144px + #{$appbar-mobile-section-padding});
                padding-left: calc(100vw - 144px - #{$appbar-mobile-section-padding});
              }
              &:nth-child(4) > input[type=checkbox]:checked ~ label {
                left: calc(-100vw + 192px + #{$appbar-mobile-section-padding});
                padding-left: calc(100vw - 192px - #{$appbar-mobile-section-padding});
              }
            }
            &.reserve {
              @include mdc-rtl-reflexive-box(margin, right, 48px + $appbar-mobile-section-padding);
              .anchor {
                &:nth-child(1) > input[type=checkbox]:checked ~ label {
                  left: calc(-100vw + 96px + #{$appbar-mobile-section-padding});
                  padding-left: calc(100vw - 96px - #{$appbar-mobile-section-padding});
                }
                &:nth-child(2) > input[type=checkbox]:checked ~ label {
                  left: calc(-100vw + 144px + #{$appbar-mobile-section-padding});
                  padding-left: calc(100vw - 144px - #{$appbar-mobile-section-padding});
                }
                &:nth-child(3) > input[type=checkbox]:checked ~ label {
                  left: calc(-100vw + 192px + #{$appbar-mobile-section-padding});
                  padding-left: calc(100vw - 192px - #{$appbar-mobile-section-padding});
                }
                &:nth-child(4) > input[type=checkbox]:checked ~ label {
                  left: calc(-100vw + 240px + #{$appbar-mobile-section-padding});
                  padding-left: calc(100vw - 240px - #{$appbar-mobile-section-padding});
                }
              }            
            }
          }
    
        }
      }

      &~ main {
        height: calc(100vh - #{$appbar-mobile-row-height});
      }

      &.short {
        transition: width 200ms $mdc-animation-standard-curve-timing-function;
        &.collapsed {
          transition: width 250ms $mdc-animation-standard-curve-timing-function;
          >div {
            >section.end {
              @include mdc-rtl-reflexive-box(padding, right, $appbar-short-collapsed-right-icon-padding);
            }
          }
        }
      }

      &.fixed {
        height: $appbar-mobile-row-height + 16px;

        &:before {
          top: $appbar-mobile-row-height - 16px;
        }

        &~ main {
          height: calc(100vh - $appbar-mobile-row-height - 16px);
        }

        &.shrink {
          &.prominent {
            top: -($appbar-prominent-row-height - $appbar-mobile-row-height);
            
            >div {
              >section {
                height: $appbar-mobile-row-height;
                &.start {
                  top: $appbar-mobile-row-height + 16px;
                }
              }
            }

            &:before {
              top: $appbar-mobile-row-height - 16px;
            }
          }
        }
      }
    }
  }
}

/*

//
// Private
//

// Applies styles to the different types of icons that can exist in top-app-bars.
// Both .mdc-top-app-bar__icon and .mdc-top-app-bar__navigation-icon share all styles except for
// horizontal padding.
@mixin appbar-icon_() {
  @include mdc-ripple-surface;
  @include mdc-ripple-radius-unbounded;

  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: $appbar-icon-size + $appbar-icon-padding * 2;
  height: $appbar-icon-size + $appbar-icon-padding * 2;
  padding: $appbar-icon-padding;
  border: none;
  outline: none;
  background-color: transparent;
  fill: currentColor;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

*/