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

.o-dlg-main {
  color: var(--dlg-color);
  position: relative;
  background-color: var(--dlg-bg-color);
  box-shadow: var(--dlg-shadow);
  border-radius: var(--dlg-radius);
  margin: var(--dlg-margin);
  width: var(--dlg-width);
  min-width: var(--dlg-min-width);
  max-height: var(--dlg-max-height);
  min-height: var(--dlg-min-height);

  display: flex;
  flex-direction: column;

  padding: var(--dlg-edge-gap);
}
.o-dlg-btn-close {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: var(--dlg-close-size);
  color: var(--dlg-close-color);
  display: flex;
  transition: transform var(--o-easing-standard) var(--o-duration-m2);
  cursor: pointer;
  z-index: 1;
  @include x-svg-hover;
  @include hover {
    color: var(--dlg-close-color-hover);
  }
  &:active {
    color: var(--dlg-close-color-active);
    transform: scale(0.9);
  }
}

.o-dlg-header {
  color: var(--dlg-header-color);
  text-align: center;
  font-size: var(--o-font_size-h2);
  line-height: var(--o-line_height-h2);
  font-weight: 500;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: var(--dlg-header-gap, var(--dlg-inner-gap));
}

.o-dlg-body {
  flex: 1;
  display: flex;
  overflow: visible;
  min-height: 0;

  > .o-scrollbar {
    --scrollbar-y-right: calc(-1 * var(--dlg-edge-gap));
  }
}
.o-dlg-body-content {
  flex: 1;
}
.o-dlg-footer {
  overflow: hidden;
  flex-shrink: 0;

  margin-top: var(--dlg-inner-gap);
}

.o-dlg-actions {
  display: flex;
  align-items: center;
  justify-content: var(--actions-justify);
}
.o-dlg-btn {
  + .o-dlg-btn {
    margin-left: var(--dlg-btn-gap);
  }
}