//
// 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/animation/functions";
@import "@material/elevation/mixins";
@import "@material/rtl/mixins";
@import "@material/theme/mixins";
@import "@material/typography/mixins";
@import "@material/typography/variables";

$mdc-dialog-dark-theme-bg-color: #303030 !default;

:root {
  --mdc-dialog-dark-theme-bg-color: #{$mdc-dialog-dark-theme-bg-color};
}

// postcss-bem-linter: define dialog

.mdc-dialog {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  visibility: hidden;
  z-index: 5;

  &__backdrop {
    @include mdc-theme-prop(background-color, text-primary-on-light);

    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
  }

  &__surface {
    @include mdc-elevation(24);
    @include mdc-theme-prop(background-color, background);

    display: inline-flex;
    flex-direction: column;
    width: calc(100% - 30px);
    min-width: 640px;
    max-width: 865px;
    transform: translateY(150px) scale(.8);
    border-radius: 2px;
    opacity: 0;

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

      background-color: $mdc-dialog-dark-theme-bg-color;
      background-color: var(--mdc-dialog-dark-theme-bg-color, #{$mdc-dialog-dark-theme-bg-color});
    }

    @include mdc-rtl(".mdc-dialog") {
      text-align: right;
    }
  }

  &__header {
    display: flex;
    align-items: center;
    padding: 24px 24px 0;

    &__empty {
      padding: 0;
    }

    @include mdc-rtl(".mdc-dialog") {
      text-align: right;
    }

    &__title {
      @include mdc-typography(title);

      flex: 1;
      margin: 0;
    }
  }

  &__body {
    @include mdc-theme-prop(color, text-secondary-on-light);
    @include mdc-typography(body1);

    margin-top: 20px;
    padding: 0 24px 24px;

    @include mdc-theme-dark(".mdc-dialog", true) {
      @include mdc-theme-prop(color, text-secondary-on-dark);
    }

    &--scrollable {
      max-height: 195px;
      border-top: 1px solid rgba(0, 0, 0, .1);
      border-bottom: 1px solid rgba(0, 0, 0, .1);
      overflow-x: auto;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }
  }

  &__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 8px;

    &__button {
      @include mdc-rtl-reflexive-box(margin, right, 8px);

      &:last-child {
        @include mdc-rtl-reflexive-box(margin, right, 0);
      }
    }
  }

  &__action {
    @include mdc-theme-prop(color, secondary);
  }

  // TODO: Replace with breakpoint variable
  @media (max-width: 640px) {
    min-width: 280px;

    &__surface {
      min-width: 280px;
    }

    &__body {
      line-height: 24px;
    }
  }

  &--animating {
    visibility: visible;

    .mdc-dialog__backdrop {
      transition: mdc-animation-enter(opacity, 120ms);
    }

    .mdc-dialog--open .mdc-dialog__surface {
      transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms);
    }

    .mdc-dialog__surface {
      transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms);
    }
  }

  &--open {
    visibility: visible;

    .mdc-dialog__backdrop {
      opacity: .3;
    }

    .mdc-dialog__surface {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
}

// postcss-bem-linter: end

.mdc-dialog-scroll-lock {
  height: 100vh;
  overflow: hidden;
}