@import "../lib.less";
@import "../variables/components/dialog.less";

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

  display: none;

  &-box {
    .fixed(0);
    display: flex;
    &:not(&-mask) {
      pointer-events: none;
      .@{veui-prefix}-dialog-content {
        box-shadow: @veui-dialog-content-shadow;
      }
    }
  }

  &-inline {
    position: static;
  }

  &-draggable {
    cursor: all-scroll;
  }

  &-content {
    margin: auto;
    display: flex;
    flex-direction: column;
    background: @veui-dialog-background-color;
    padding-bottom: @veui-dialog-padding-y;
    .veui-position-center();
    overflow-y: auto;
    outline: none;
    pointer-events: auto;
    .veui-transition(transform);
    transform-origin: 50% 50%;
    border-radius: @veui-dialog-border-radius;
    min-height: @veui-dialog-min-height;
    max-height: @veui-dialog-max-height;
    [ui~="xs"] & {
        width: @veui-dialog-width-xs;
    }

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

    [ui~="m"] & {
      width: @veui-dialog-width-medium;
      min-height: @veui-dialog-min-height-m;
    }

    [ui~="l"] & {
      width: @veui-dialog-width-wide;
      min-height: @veui-dialog-min-height-l;
    }
    [ui~="xl"] & {
        width: @veui-dialog-width-xl;
        min-height: @veui-dialog-min-height-l;
    }
    [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: center;
      justify-content: flex-end;
      padding: @veui-dialog-padding-head-y @veui-dialog-padding-x;

      &:empty {
        padding-bottom: 0;
      }

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

      &-close {
        margin-left: @veui-dialog-title-content-spacing;
        font-size: inherit;

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

    &-body {
      flex-grow: 1;
      .margin(-@veui-shadow-spread-focus, _);
      padding: @veui-shadow-spread-focus @veui-dialog-padding-x;
      line-height: @veui-dialog-title-line-height;
      color: @veui-dialog-body-font-color;
      overflow: auto;
      font-size: inherit;
      /* To workaround an edge case which triggers composition problems on Firefox */
      transform-style: preserve-3d;
    }

    &-foot {
      padding: @veui-dialog-padding-foot-y @veui-dialog-padding-x 0;
      text-align: right;

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

  &-box-mask {
    background-color: @veui-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: translate(50%, calc(50% - @transition-offset));
  }
}