@use '../../global/scss/tools' as nsw;

.dialog-active {
  overflow: hidden;
}

.nsw-dialog {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(var(--nsw-black-rgb), 0.7);
  justify-content: center;
  align-items: flex-end;
  
  @include nsw.z-index('upper');

  .nsw-section--invert & {
    color: var(--nsw-text-dark);

    .nsw-icon-button {
      @include nsw.link-dark();
    }
  }

  @include nsw.breakpoint('sm') {
    align-items: center;
    padding: 0 nsw.rem(16px);
  }

  &.active {
    display: flex;
  }

  &__wrapper {
    background-color: var(--nsw-white);
    width: 100%;
    max-width: nsw.rem(736px);
    position: relative;
    padding-bottom: nsw.rem(145px);

    @include nsw.breakpoint('sm') {
      border-radius: var(--nsw-border-radius);
      align-items: center;
      max-height: 90%;
    }

    @include nsw.breakpoint('md') {
      padding-bottom: nsw.rem(81px);
    }

    @include nsw.breakpoint('lg') {
      padding-bottom: nsw.rem(113px);
    }

    .nsw-dialog--single-action & {
      padding-bottom: nsw.rem(81px);

      @include nsw.breakpoint('lg') {
        padding-bottom: nsw.rem(113px);
      }
    }
  }

  &__container {
    height: 100%;
    max-height: calc(100vh - #{nsw.rem(145px)});
    overflow-y: auto;

    @include nsw.breakpoint('sm') {
      max-height: calc(90vh - #{nsw.rem(145px)});
    }

    @include nsw.breakpoint('md') {
      max-height: calc(90vh - #{nsw.rem(81px)});
    }

    @include nsw.breakpoint('lg') {
      max-height: calc(90vh - #{nsw.rem(113px)});
    }

    .nsw-dialog--single-action & {
      max-height: calc(100vh - #{nsw.rem(81px)});

      @include nsw.breakpoint('sm') {
        max-height: calc(90vh - #{nsw.rem(81px)});
      }

      @include nsw.breakpoint('lg') {
        max-height: calc(90vh - #{nsw.rem(113px)});
      }
    }
  }

  &__top {
    border-bottom: 1px solid var(--nsw-grey-04);
    display: flex;
  }

  &__title {
    padding: nsw.rem(16px);
    width: 100%;

    @include nsw.breakpoint('lg') {
      padding: nsw.rem(32px);
    }
  }

  &__close {
    min-width: nsw.rem(48px);
    max-width: nsw.rem(48px);
    padding: nsw.rem(8px) nsw.rem(8px) nsw.rem(8px) 0;

    @include nsw.breakpoint('lg') {
      min-width: nsw.rem(64px);
      max-width: nsw.rem(64px);
      padding: nsw.rem(24px) nsw.rem(24px) nsw.rem(24px) 0;
    }
  }

  &__content {
    padding: nsw.rem(16px);

    @include nsw.breakpoint('lg') {
      padding: nsw.rem(32px);
    }
  }

  &__bottom {
    border-top: 1px solid var(--nsw-grey-04);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: nsw.rem(16px);

    @include nsw.breakpoint('md') {
      flex-direction: row-reverse;
      justify-content: flex-start;
    }

    @include nsw.breakpoint('lg') {
      padding: nsw.rem(32px);
    }

    button {
      margin-bottom: nsw.rem(16px);

      @include nsw.breakpoint('md') {
        margin-left: nsw.rem(16px);
        margin-bottom: 0;
      }

      &:last-child {
        margin-bottom: 0;

        @include nsw.breakpoint('md') {
          margin-left: 0;
        }
      }
    }
  }
}