//
// Copyright 2020 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

// Selector '.mdc-*' should only be used in this project.
// stylelint-disable selector-class-pattern --
// Internal styling for Tooltip MDC component.

@use 'sass:math';
@use '@material/feature-targeting/feature-targeting';
@use '@material/typography/typography';
@use '@material/button/button-theme';
@use '@material/ripple/ripple-theme';
@use '@material/rtl/rtl';
@use './banner-theme';

$_text-type-scale: body2;
$_min-width: 344px;
$_max-width: 720px;
// Minimum banner height minus standard text height, divided by 2 for both top
// and bottom padding. This is used to support two/three line banners.
$_text-padding-top-bottom: math.div(52px - 20px, 2);

$_enter-duration: 300ms;
$_exit-duration: 250ms;

/// Core styles for banner component.
@mixin core-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);
  $feat-animation: feature-targeting.create-target($query, animation);

  @include banner-theme.graphic-color(
    banner-theme.$graphic-color,
    $query: $query
  );
  @include banner-theme.graphic-background-color(
    banner-theme.$graphic-background-color,
    $query: $query
  );
  @include banner-theme.min-width($_min-width, $query: $query);
  @include banner-theme.max-width($_max-width, $query: $query);
  @include static-styles($query: $query);

  .mdc-banner {
    @include banner-theme.theme-styles(
      banner-theme.$light-theme,
      $query: $query
    );
  }

  .mdc-banner__secondary-action {
    @include feature-targeting.targets($feat-structure) {
      @include rtl.reflexive-property(margin, 0, 8px);
    }
  }
}

@mixin static-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);
  $feat-animation: feature-targeting.create-target($query, animation);

  .mdc-banner {
    @include banner-theme.z-index(banner-theme.$z-index, $query: $query);

    @include feature-targeting.targets($feat-structure) {
      // Mobile view styles.
      @media (max-width: banner-theme.$mobile-breakpoint) {
        // Span across viewport for fixed mobile view.
        .mdc-banner__fixed {
          left: 0;
          right: 0;
        }

        .mdc-banner__text {
          @include rtl.reflexive-property(margin, 16px, 36px);
        }
      }

      border-bottom-style: solid;
      box-sizing: border-box;
      display: none;
      flex-shrink: 0;
      height: 0;
      position: relative;
      width: 100%;
    }

    &.mdc-banner--mobile-stacked {
      @media (max-width: banner-theme.$mobile-breakpoint) {
        @include banner-theme.layout-stacked($query: $query);
      }
    }
  }

  .mdc-banner--opening,
  .mdc-banner--open,
  .mdc-banner--closing {
    @include feature-targeting.targets($feat-structure) {
      display: flex;
    }
  }

  .mdc-banner--open {
    @include feature-targeting.targets($feat-animation) {
      transition: height $_enter-duration ease;
    }

    .mdc-banner__content {
      @include feature-targeting.targets($feat-animation) {
        transition: transform $_enter-duration ease;
      }

      @include feature-targeting.targets($feat-structure) {
        transform: translateY(0);
      }
    }
  }

  .mdc-banner--closing {
    @include feature-targeting.targets($feat-animation) {
      transition: height $_exit-duration ease;
    }

    .mdc-banner__content {
      @include feature-targeting.targets($feat-animation) {
        transition: transform $_exit-duration ease;
      }
    }
  }

  .mdc-banner--centered {
    @include banner-theme.position-centered($query: $query);
  }

  .mdc-banner__fixed {
    @include feature-targeting.targets($feat-structure) {
      border-bottom-style: solid;
      box-sizing: border-box;
      height: inherit;
      position: fixed;
      width: 100%;
    }
  }

  .mdc-banner__content {
    @include feature-targeting.targets($feat-structure) {
      display: flex;
      min-height: 52px;
      position: absolute;
      transform: translateY(-100%);
      width: 100%;
    }
  }

  .mdc-banner__graphic-text-wrapper {
    @include feature-targeting.targets($feat-structure) {
      display: flex;
      width: 100%;
    }
  }

  .mdc-banner__graphic {
    @include feature-targeting.targets($feat-structure) {
      @include rtl.reflexive-property(margin, 16px, 0);

      flex-shrink: 0;
      margin-top: 16px;
      margin-bottom: 16px;
      text-align: center;
    }
  }

  .mdc-banner__icon {
    @include feature-targeting.targets($feat-structure) {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .mdc-banner__text {
    @include feature-targeting.targets($feat-structure) {
      @include rtl.reflexive-property(margin, 24px, 90px);

      align-self: center;
      flex-grow: 1;

      padding-top: $_text-padding-top-bottom;
      padding-bottom: $_text-padding-top-bottom;
    }
  }

  .mdc-banner__actions {
    @include feature-targeting.targets($feat-structure) {
      @include rtl.reflexive-property(padding, 0, 8px);

      align-self: flex-end;
      display: flex;
      flex-shrink: 0;
      padding-bottom: 8px;
      padding-top: 8px;
    }
  }

  .mdc-banner__secondary-action {
    @include feature-targeting.targets($feat-structure) {
      @include rtl.reflexive-property(margin, 0, 8px);
    }
  }
}