@import '../variables/default.scss';
@import '../mixins/index.scss';

$float-layout-timer: 300ms;

.at-float-layout {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  // visibility: hidden;
  // z-index: $zindex-flot-layout;
  // transition: visibility $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1);

  /* elements */
  &__overlay {
    @include overlay;
    // transition: opacity 150ms ease-in;
  }

  &__container {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: $float-layout-height-min;
    max-height: $float-layout-height-max;
    background-color: $color-bg;
    // transform: translate3d(0, 100%, 0);
    // transition: transform $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1);
  }

  /* modifiers */
  // &--active {
  //  //  visibility: visible;

  //   .at-float-layout__overlay {
  //     opacity: 1;
  //   }

  //   .at-float-layout__container {
  //     //  transform: translate3d(0, 0, 0);
  //   }
  // }
}

.layout {
  &-header {
    position: relative;
    padding: $spacing-v-md;
    // line-height: $line-height-zh;
    background-color: $float-layout-header-bg-color;

    &__title {
      // @include line(1);

      color: $float-layout-title-color;
      font-size: $float-layout-title-font-size;
      line-height: $line-height-zh * $float-layout-title-font-size;
      display: flex;
      padding-right: 80px;
    }

    &__btn-close {
      position: absolute;
      padding: $spacing-h-sm;
      top: $spacing-h-sm;
      right: $spacing-v-md;
      width: 40px;
      height: 48px;

      &__at-icon {
        font-size: $float-layout-title-font-size;
        color: $float-layout-btn-color;
      }

      &--image {
        width: 100%;
        height: 100%;
      }
      // line-height: 1;
      // transform: translate(0, -50%);

      // &::before,
      // &::after {
      //   content: '';
      //   position: absolute;
      //   top: 50%;
      //   left: 50%;
      //   //  display: inline-block;
      //   width: 36px;
      //   height: 2PX;
      //   border-radius: 1PX;
      //   background: $float-layout-btn-color;
      // }

      // &::before {
      //   //  transform: translate3d(-50%, -50%, 0) rotate(45deg);
      // }

      // &::after {
      //   //  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
      // }
    }
  }

  &-body {
    font-size: $font-size-base;
    padding: $spacing-v-md;
    max-height: 828px;
    min-height: 514px;

    &__content {
      max-height: 798px;
      min-height: 484px;
    }
  }
}