@import 'style/theming';
$section-padding: .8rem;

@keyframes fixed-fadein {
  from {
    transform: translateX(10rem);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.box {
  &--floating {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &--fixed {
    position: absolute;
  }

  &__content {
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    overflow: hidden;

    @include themed() {
      border: 1px solid t(border-color);
      color: t(foreground-color);
      background: t(background-color);
    }

    &--floating, &--fixed-right {
      .box__header,
      .box__body,
      .box__footer {
        padding: 1.8rem 2.4rem;
      }
    }

    &--floating {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 90vw;

      @media screen and (min-width: 600px) {
        min-width: 36rem;
      }

      .box__body {
        max-height: 80vh;
      }
    }

    &--fixed-right {
      position: fixed;
      right: 0;
      top: 0;
      z-index: 50;
      width: 40rem;
      height: 100vh;

      animation: fixed-fadein .35s forwards;
      overscroll-behavior: contain;
      border: 0;
      border-radius: 0;
    }

    &--transparent {
      border: none;
      border-radius: none;
      background: none;
    }

    &--transparent-mobile {
      @media screen and (max-width: 600px) {
        border: none;
        border-radius: none;
        background: none;
      }
    }
  }

  &__header {
    display: flex;
    align-items: center;
    line-height: 100%;

    padding: 0 $section-padding;
    height: 3rem;

    @include themed() {
      background: t(background-color-alt);
    }

    :deep(svg) {
      width: 1.2rem;
    }
  }

  &__header-title {
    flex: 1;
  }

  &__body {
    // max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;

    &--padded {
      padding: $section-padding;
    }
  }

  &__footer {
    display: flex;
    justify-content: flex-end;
    column-gap: .8rem;
    padding: $section-padding;
    margin-top: auto;

    transition: box-shadow .3s;

    @include themed() {
      border-top: 1px solid t(border-color);
      &--shadowed {
        box-shadow: 0 -4px 20px t(border-color);
        z-index: 10;
      }
    }
  }
}