dialog.less

@import "../lib.less";

.@{veui-prefix}-dialog {
  @transition-offset: 10px;

  display: none;

  &-box {
    .fixed(0);
    display: flex;
    justify-content: center;
    align-items: center;

    &:not(&-mask) {
      pointer-events: none;
    }
  }

  &-inline {
    position: static;
  }

  &-draggable {
    cursor: all-scroll;
  }

  &-content {
    margin: auto;
    display: flex;
    flex-direction: column;
    background: @dls-dialog-background-color;
    padding-bottom: @dls-dialog-padding-y;
    max-height: @dls-dialog-max-height;
    overflow-y: auto;
    outline: none;
    pointer-events: auto;
    .veui-transition(transform);
    transform-origin: 50% 50%;
    box-shadow: @dls-dialog-shadow;
    border-radius: @dls-dialog-border-radius;
    line-height: @dls-line-height-1;

    [ui~="narrow"] & {
      width: @dls-dialog-width-narrow;
    }

    [ui~="medium"] & {
      width: @dls-dialog-width-medium;
    }

    [ui~="wide"] & {
      width: @dls-dialog-width-wide;
    }

    [ui~="fullscreen"] & {
      .fixed(0);
      width: auto;
      max-height: none;
      transform: none;
      border-radius: 0;
    }

    [ui~="fullscreen"].@{veui-prefix}-overlay-enter &,
    [ui~="fullscreen"].@{veui-prefix}-overlay-leave-to & {
      transform: scale(0.98);
    }

    [ui~="auto"] & {
      width: auto;
    }

    &-head {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: @dls-dialog-padding-y @dls-dialog-padding-x
        @dls-dialog-title-spacing-after;

      &:empty {
        padding-bottom: 0;
      }

      &-title {
        display: flex;
        align-items: center;
        margin: 0;
        flex-grow: 1;
        line-height: @dls-dialog-title-line-height;
        font-weight: @dls-dialog-title-font-weight;
        color: @dls-dialog-title-font-color;
      }

      &-close {
        margin-left: @dls-dialog-title-content-spacing;

        .@{veui-prefix}-icon {
          .dls-icon-size(
            @dls-dialog-close-icon-size,
            @dls-dialog-close-icon-min-size
          );

          [ui~="fullscreen"] & {
            .dls-icon-size(
              @dls-dialog-close-icon-size-fullscreen,
              @dls-dialog-close-icon-min-size
            );
          }
        }
      }

      &-title,
      &-close {
        [ui~="s"] & {
          font-size: @dls-dialog-title-font-size-s;
        }

        [ui~="m"] & {
          font-size: @dls-dialog-title-font-size-m;
        }
      }
    }

    &-body {
      flex-grow: 1;
      .margin(-@dls-shadow-spread-focus, _);
      padding: @dls-shadow-spread-focus @dls-dialog-padding-x;
      font-size: @dls-dialog-body-font-size-m;
      line-height: @dls-dialog-body-line-height;
      color: @dls-dialog-body-font-color;
      overflow: auto;

      /* To workaround an edge case which triggers composition problems on Firefox */
      transform-style: preserve-3d;

      [ui~="s"] & {
        font-size: @dls-dialog-body-font-size-s;
      }
    }

    &-foot {
      padding: @dls-dialog-action-spacing-before @dls-dialog-padding-x 0;

      .@{veui-prefix}-button + .@{veui-prefix}-button {
        margin-left: @dls-dialog-action-content-spacing;
      }
    }
  }

  &-box-mask {
    background-color: @dls-dialog-backdrop-color;
    overflow: hidden;
    transform: none;
  }

  &-inline &-content {
    position: static;
    width: 100%;
    transform: none;
  }

  &-inline&-box-mask {
    overflow: visible;
    background-color: transparent;
  }

  .@{veui-prefix}-overlay-enter &-content,
  .@{veui-prefix}-overlay-leave-to &-content {
    transform: translateY(-@transition-offset);
  }
}