@use '../../_styles/mixin.scss' as *;

.o-dialog-responsive {
  @include respond('>phone') {
    --layer-origin: center;
  }
  @include respond('<=pad') {
    --layer-position: fixed;
    .o-dlg-btn {
      + .o-dlg-btn.o-btn-text {
        position: relative;
        &::before {
          content: '';
          border-left: 1px solid var(--o-color-control1-light);
          position: absolute;
          height: 24px;
          left: -8px;
        }
      }
    }
  }
  @include respond('phone') {
    --layer-align: flex-end;
    --layer-origin: center bottom;
    --dlg-min-width: none;
    .o-dlg-btn {
      flex: 1;
    }
    .o-dlg-btn-close {
      display: none;
    }
  }
}

.o-dialog {
  @include respond('laptop') {
    --dlg-edge-gap: 24px;
    --dlg-inner-gap: 16px;
  }
  @include respond('<=pad') {
    --dlg-edge-gap: 16px;
    --dlg-inner-gap: 12px;
  }
}

.o-dlg-header {
  @include respond('laptop') {
    font-size: var(--o-font_size-h4);
    line-height: var(--o-line_height-h4);
  }
  @include respond('<=pad') {
    font-size: var(--o-font_size-text2);
    line-height: var(--o-line_height-text2);
  }
}

.o-dialog-exlarge {
  @include respond('laptop') {
    --dlg-width: 75%;
    --dlg-max-height: 80%;
    --dlg-min-height: 65%;
  }
  @include respond('pad_h') {
    --dlg-width: 80%;
    --dlg-max-height: 80%;
    --dlg-min-height: 65%;
  }
  @include respond('<=pad_v') {
    --dlg-width: 100%;
    --dlg-max-height: 100%;
    --dlg-min-height: 100%;
    --dlg-radius: 0;
    --dlg-margin: 0;
  }
}
.o-dialog-large {
  @include respond('laptop') {
    --dlg-width: 60%;
    --dlg-max-height: 80%;
    --dlg-min-height: 50%;
  }
  @include respond('pad_h') {
    --dlg-width: 65%;
    --dlg-max-height: 80%;
    --dlg-min-height: 50%;
  }
  @include respond('<=pad_v') {
    --dlg-width: 100%;
    --dlg-max-height: 100%;
    --dlg-min-height: 100%;
    --dlg-radius: 0;
    --dlg-margin: 0;
  }
}
.o-dialog-medium {
  @include respond('laptop') {
    --dlg-width: 40%;
    --dlg-max-height: 80%;
    --dlg-min-height: 35%;
  }
  @include respond('pad_h') {
    --dlg-width: 65%;
    --dlg-max-height: 80%;
    --dlg-min-height: 128px;
  }
  @include respond('pad_v') {
    --dlg-width: 75%;
    --dlg-max-height: 80%;
    --dlg-min-height: 128px;
  }
  @include respond('phone') {
    --dlg-width: 100vw;
    --dlg-max-height: 65%;
    --dlg-min-height: 128px;
    --dlg-margin: 24px;
  }
}
.o-dialog-small {
  @include respond('laptop') {
    --dlg-width: 25%;
    --dlg-max-height: 50%;
    --dlg-min-height: 20%;
  }
  @include respond('pad_h') {
    --dlg-width: 32%;
    --dlg-min-height: 128px;
    --dlg-max-height: 80%;
  }
  @include respond('pad_v') {
    --dlg-width: 75%;
    --dlg-min-height: 128px;
    --dlg-max-height: 80%;
  }
  @include respond('phone') {
    --dlg-width: 100vw;
    --dlg-min-height: 128px;
    --dlg-max-height: 65%;

    --dlg-margin: 24px;
  }
}

.o-dialog-phone-half-full {
  @include respond('phone') {
    --dlg-width: 100%;
    --dlg-margin: 0;
    &.o-dialog-auto,
    &.o-dialog-small,
    &.o-dialog-medium {
      --dlg-radius: var(--o-radius_control-l) var(--o-radius_control-l) 0 0;
    }
  }
}

@include respond('laptop') {
  .o-dialog {
    --dlg-btn-gap: 12px;
  }
}

@include respond('<=pad') {
  .o-dialog {
    --dlg-btn-gap: 8px;
  }
}