@import "./mixin.less";

.dialog-wrapper {
  .flex(column, flex-start, center);
  @apply fixed top-0 left-0 w-full h-full pt-16 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all;
  .hide-scroll-bar();

  &.showup {
    background-color: rgba(0, 0, 0, 0.6);
  }

  &.showoff {
    display: none;
  }

  > .dialog-container {
    .flex(column, flex-start, flex-start);
    @apply bg-white p-4 rounded-lg;

    > .dialog-header-container {
      .flex(row, space-between, center);
      @apply w-full mb-4;

      > .title-text {
        > .icon-text {
          @apply mr-2 text-base;
        }
      }

      .btn {
        .flex(column, center, center);
        @apply w-6 h-6 rounded hover:bg-gray-100 hover:shadow;
      }
    }

    > .dialog-content-container {
      .flex(column, flex-start, flex-start);
      @apply w-full;
    }

    > .dialog-footer-container {
      .flex(row, flex-end, center);
      @apply w-full mt-4;
    }
  }
}