@use "mixins";
@use "variables";

.fwe-bottom-sheet {
  &-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-drag-handle-container {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  &-drag-handle {
    width: variables.$spacer-l;
    height: variables.$spacer-xxxs;
    background-color: variables.$hero-gray;
    border-radius: 3px;
    margin: variables.$spacer 0;
  }

  &-toggle-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: variables.$spacer-s;
  }

  &-close-btn {
    width: variables.$spacer-m;
    height: variables.$spacer-m;
    position: absolute;
    right: 20px;
    top: 20px;
    padding: 0;
    border: none;
    min-width: variables.$spacer-m;
    cursor: pointer;
    background: variables.$text;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
  }

  &-backdrop {
    position: fixed;
    top: 0;
    left: 0;

    background: rgba(0, 0, 0, 0.5);
    z-index: variables.$zindex-modal-backdrop;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    &--visible {
      opacity: 1;
      right: 0;
      bottom: 0;
    }
  }

  &-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    right: 50%;
    background: variables.$white;
    box-shadow: 0px 1px 8px #33333333;
    z-index: variables.$zindex-modal;
    border-radius: variables.$spacer-xs variables.$spacer-xs 0 0;
    overflow: hidden;
    opacity: 0;
    max-width: 768px;
    width: 100%;
    transform: translateX(-50%) translateY(100%);
    transition: height 0.3s ease-in-out, transform 0.4s cubic-bezier(0.83, 0, 0.17, 1);

    &--open {
      height: 12.5vh;
      opacity: 1;
      transform: translateX(-50%) translateY(0);

      &.fwe-bottom-sheet-container--expand-from-center {
        height: 55vh;

        &.fwe-bottom-sheet-container--expanded {
          height: calc(100vh - 64px);
        }
      }

      &.fwe-bottom-sheet-container--closing {
        transform: translateX(-50%) translateY(100%);
      }
    }

    &--expanded {
      height: calc(100vh - 64px);
    }

    &--with-backdrop {
      box-shadow: none;
    }
  }

  &-content {
    padding: variables.$spacer variables.$spacer-l;
    height: calc(100% - variables.$spacer-l);
    overflow-y: auto;
    @include mixins.custom-scrollbar;
  }
}