@import '../colors';
@import '../Icon/variables';
@import '../mixins';
@import '../variables';

$bs-btn-text-max-width: 90px;
$bs-easing-bounce: cubic-bezier(0, 1.02, 0.54, 1.16);
$bs-easing-linear: cubic-bezier(0.17, 0.67, 0.69, 0.97);
$bs-handle-height: 4px;
$bs-handle-margin-vertical: 12px;
$bs-header-margin-vertical: 16px;
$bs-header-margin-horizontal: 20px;
$bs-title-margin-vertical: 10px;
$bs-title-margin-horizontal: 16px;
$bs-popup-radius: 12px;
$bs-popup-expand-top-space: 38px;
$bs-show-animation-time: 700ms;

$bs-header-height: #{$tix-icon-size-medium + 2 * $bs-header-margin-vertical};
$bs-handle-wrapper-height: #{$bs-handle-height + 2 * $bs-handle-margin-vertical};

html[class^='disable-bounce'],
html[class^='disable-bounce'] > body {
  overflow: hidden;
  overscroll-behavior-y: none;
}

.tix-bottom-sheets.v4 {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 1000;
  animation: bg-fade-in 0.3s linear both;

  @at-root {
    .closing#{&} {
      animation: bg-fade-out 0.3s linear both;
    }
  }

  .bs-wrapper {
    bottom: 0px;
    left: 0px;
    position: fixed;
    right: 0px;
    top: 0px;
    animation: bottomsheet-animation-show-bounce-y-flip $bs-show-animation-time
      linear both;

    /**
    * Popup handle visibility issue
    *
    * Issue:
    * When .bs-handle placed inside .bs-popup we have an issue to keep the handle stay visible because .bs-popup have overflow auto rule.
    *
    * Workaround:
    * 1. Rotate the main container 180deg. This is to switch stack behavior from top to bottom.
    * 2. Move .bs-handle outside .bs-popup so we can keep it visible. And put it below .bs-popup.
    * 3. Rotate .bs-handle and .bs-popup 180deg to switch back the position.
    */
    transform: rotate(180deg) translateY(-100%);

    .bs-handle,
    .bs-popup,
    .bs-mask-bounce-bottom,
    .bs-content-header {
      transform: rotate(180deg);
    }

    /** End of popup handle visibility issue*/

    @at-root {
      .closing#{&} {
        animation: animation-hide-y-flip 1s linear both;
      }
    }

    .bs-close-handle {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
    }

    .bs-mask-bounce-bottom {
      position: relative;

      &:after {
        content: '';
        display: block;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 100%;
        height: 100vw;
        background-color: $color-N0;
        margin-top: -1px;
      }
    }

    .bs-handle {
      padding: $bs-handle-margin-vertical;

      &::after {
        content: '';
        display: block;
        height: $bs-handle-height;
        width: 40px;
        background-color: $color-N0;
        border-radius: $bs-handle-height/2;
        margin: 0 auto;
      }
    }

    .bs-content-header {
      border-radius: $bs-popup-radius $bs-popup-radius 0 0;
      margin-top: -#{$bs-header-height};
      box-sizing: border-box;
      background-color: $color-N0;
      transition: box-shadow 0.2s $bs-easing-linear;
      padding: 0 $bs-header-margin-horizontal;

      @at-root {
        .scrolled-top#{&} {
          @include elevation-2;
        }
      }

      &::after {
        content: '';
        display: block;
        clear: both;
      }

      .bs-title {
        float: left;
        max-width: calc(
          100% - #{$bs-header-margin-horizontal + $tix-icon-size-medium}
        );
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: $bs-header-margin-vertical 0;
        opacity: 0;

        @at-root {
          .has-text-button#{&} {
            max-width: calc(
              100% - #{$bs-header-margin-horizontal + $tix-icon-size-medium +
                $bs-btn-text-max-width}
            );
          }
          .header-title-visible#{&} {
            opacity: 1;
          }
        }
      }

      .bs-btn-text {
        position: absolute;
        top: $bs-header-margin-vertical;
        right: $bs-header-margin-horizontal;
        max-width: $bs-btn-text-max-width;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: $tix-icon-size-medium;
      }

      .bs-icon-close-wrapper {
        padding: $bs-header-margin-vertical 0;
        float: left;

        @at-root {
          .expanded#{&} {
            float: left;
          }
        }

        .bs-icon-close {
          line-height: 22px;
          margin-right: $bs-title-margin-horizontal;

          @at-root {
            .expanded#{&} {
              float: left;
              margin-bottom: 0px;
            }
          }
        }
      }
    }

    .bs-popup {
      position: relative;
      background-color: $color-N0;
      border-radius: $bs-popup-radius $bs-popup-radius 0 0;
      bottom: 0px;
      left: 0px;
      right: 0px;
      box-sizing: border-box;
      overflow-y: auto;
      overscroll-behavior-y: none;
      overflow-x: hidden;
      clip-path: inset(0 round $bs-popup-radius $bs-popup-radius 0 0);
      max-height: calc(100% - #{$bs-popup-expand-top-space});
      padding-top: $bs-header-height;

      @at-root {
        .has-bounce-animation#{&} {
          transition: height 0.5s $bs-easing-bounce;
        }
      }

      &::-webkit-scrollbar {
        display: none;
      }

      .bs-content-body {
        .bs-title-wrapper {
          padding-top: $bs-title-margin-vertical;
          padding-bottom: $bs-title-margin-vertical;

          .bs-icon-title {
            float: left;
            line-height: 30px;
            margin-right: $bs-title-margin-horizontal;
          }

          .bs-title {
            margin: 0px;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }

      // padding utility for non-clean bottom-sheet variant
      .bs-content-padding {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 12px;
      }
    }
  }
}

@keyframes bg-fade-in {
  from {
    background-color: transparent;
  }
  to {
    background-color: $blanket-bg-color;
  }
}

@keyframes bg-fade-out {
  from {
    background-color: $blanket-bg-color;
  }
  to {
    background-color: transparent;
  }
}

@keyframes animation-hide-y-flip {
  0% {
    transform: rotate(180deg) translateY(0%);
  }

  5.71% {
    transform: rotate(180deg) translateY(-37.513%);
  }

  11.31% {
    transform: rotate(180deg) translateY(-63.4581%);
  }

  17.02% {
    transform: rotate(180deg) translateY(-80.0777%);
  }

  22.62% {
    transform: rotate(180deg) translateY(-91.665%);
  }

  100% {
    transform: rotate(180deg) translateY(-100%);
  }
}

@keyframes bottomsheet-animation-show-bounce-y-flip {
  0% {
    transform: rotate(180deg) translateY(-100%);
  }

  5.71% {
    transform: rotate(180deg) translateY(-62.4862%);
  }

  11.31% {
    transform: rotate(180deg) translateY(-36.4581%);
  }

  17.02% {
    transform: rotate(180deg) translateY(-19.0777%);
  }

  22.62% {
    transform: rotate(180deg) translateY(-8.665%);
  }

  28.33% {
    transform: rotate(180deg) translateY(-2.7139%);
  }

  33.93% {
    transform: rotate(180deg) translateY(0.2147%);
  }

  45.15% {
    transform: rotate(180deg) translateY(1.7093%);
  }

  72.57% {
    transform: rotate(180deg) translateY(0.3869%);
  }

  100% {
    transform: rotate(180deg) translateY(0%);
  }
}