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

@import "@material/elevation/mixins";
@import "@material/ripple/mixins";
@import "@material/rtl/mixins";
@import "@material/theme/mixins";
@import "@material/typography/mixins";
@import "./mixins";
@import "./variables";

// postcss-bem-linter: define toolbar
.mdc-toolbar {
  @include mdc-toolbar-fill-color-accessible(primary);

  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;

  &__row {
    display: flex;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: $mdc-toolbar-row-height;

    // TODO: refactor this out when #23 is implemented
    @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint)
      and (orientation: landscape) {
      min-height: $mdc-toolbar-mobile-landscape-row-height;
    }

    // TODO: refactor this out when #23 is implemented
    @media (max-width: $mdc-toolbar-mobile-breakpoint) {
      min-height: $mdc-toolbar-mobile-row-height;
    }
  }

  &__section {
    display: inline-flex;
    flex: 1;
    align-items: start;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
    padding: $mdc-toolbar-element-section-padding;
    z-index: 1;

    @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint)
      and (orientation: landscape) {
      padding: 0;
    }

    @media (max-width: $mdc-toolbar-mobile-breakpoint) {
      padding: $mdc-toolbar-element-mobile-section-padding 0;
    }

    &--align-start {
      @include mdc-rtl-reflexive-box(padding, "left", $mdc-toolbar-section-horizontal-padding);

      justify-content: flex-start;
      order: -1;

      @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint)
        and (orientation: landscape) {
        @include mdc-rtl-reflexive-box(padding, "left", $mdc-toolbar-mobile-section-horizontal-padding);
      }

      @media (max-width: $mdc-toolbar-mobile-breakpoint) {
        @include mdc-rtl-reflexive-box(padding, "left", $mdc-toolbar-mobile-section-horizontal-padding);
      }
    }

    &--align-end {
      @include mdc-rtl-reflexive-box(padding, "right", $mdc-toolbar-section-horizontal-padding);

      justify-content: flex-end;
      order: 1;

      @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint)
        and (orientation: landscape) {
        @include mdc-rtl-reflexive-box(padding, "right", $mdc-toolbar-mobile-section-horizontal-padding);
      }

      @media (max-width: $mdc-toolbar-mobile-breakpoint) {
        @include mdc-rtl-reflexive-box(padding, "right", $mdc-toolbar-mobile-section-horizontal-padding);
      }
    }
  }

  &__title {
    @include mdc-typography(headline6);
    @include mdc-typography-overflow-ellipsis;
    @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-element-horizontal-padding-desktop);

    align-self: center;
    padding: 12px 0;
    line-height: 1.5rem;
    z-index: 1;
  }

  &__icon,
  &__menu-icon {
    @include mdc-toolbar-icon_;
  }
}

.mdc-toolbar__menu-icon + .mdc-toolbar__title {
  @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-title-margin-to-menu-icon-desktop);
}

@media (max-width: $mdc-toolbar-mobile-breakpoint) {
  .mdc-toolbar__title {
    @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-element-horizontal-padding-mobile);
  }
}

.mdc-toolbar--fixed {
  @include mdc-elevation(4);

  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}

.mdc-toolbar--flexible {
  // bem linter is disabled because it cannot correctly reconcile mdc prefix for css variables.
  // stylelint-disable-next-line plugin/selector-bem-pattern
  --mdc-toolbar-ratio-to-extend-flexible: #{$mdc-toolbar-ratio-to-extend-flexible};

  .mdc-toolbar__row:first-child {
    height: $mdc-toolbar-row-height * $mdc-toolbar-ratio-to-extend-flexible;
    height: calc(#{$mdc-toolbar-row-height} * var(--mdc-toolbar-ratio-to-extend-flexible, #{$mdc-toolbar-ratio-to-extend-flexible}));

    @media (max-width: $mdc-toolbar-mobile-breakpoint) {
      height: $mdc-toolbar-mobile-row-height * $mdc-toolbar-ratio-to-extend-flexible;
      height: calc(#{$mdc-toolbar-mobile-row-height} * var(--mdc-toolbar-ratio-to-extend-flexible, #{$mdc-toolbar-ratio-to-extend-flexible}));
    }

    &::after {
      // The style ensures the pseudo element will be defined and can easily be styled
      position: absolute;
      content: "";
    }
  }

  // stylelint-disable plugin/selector-bem-pattern
  // bem linter is disabled because it cannot handle multiple top level selector
  &-default-behavior {
    .mdc-toolbar__title {
      @include mdc-typography(headline6);

      align-self: flex-end;
      line-height: 1.5rem;
    }

    .mdc-toolbar__row:first-child::after {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity .2s ease;
      opacity: 1;
    }

    &.mdc-toolbar--flexible-space-minimized {
      .mdc-toolbar__row:first-child::after {
        opacity: 0;
      }

      .mdc-toolbar__title {
        font-weight: #{map-get($mdc-typography-font-weight-values, medium)};
      }
    }
  }
}

.mdc-toolbar--waterfall {
  &.mdc-toolbar--fixed {
    @include mdc-elevation(0);

    transition: mdc-elevation-transition-value();
    will-change: $mdc-elevation-property;

    &.mdc-toolbar--flexible-space-minimized {
      @include mdc-elevation(4);
    }

    &.mdc-toolbar--fixed-lastrow-only {
      &.mdc-toolbar--flexible-space-minimized {
        @include mdc-elevation(0);
      }

      &.mdc-toolbar--fixed-at-last-row {
        @include mdc-elevation(4);
      }
    }
  }
}
// postcss-bem-linter: end
// stylelint-enable plugin/selector-bem-pattern

.mdc-toolbar-fixed-adjust {
  margin-top: $mdc-toolbar-row-height;

  @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint)
    and (max-height: $mdc-toolbar-mobile-breakpoint) {
    margin-top: $mdc-toolbar-mobile-landscape-row-height;
  }

  @media (max-width: $mdc-toolbar-mobile-breakpoint) {
    margin-top: $mdc-toolbar-mobile-row-height;
  }
}

.mdc-toolbar__section--shrink-to-fit {
  flex: none;
}