@ozen-ui/kit/__inner__/esm/components/Dialog/Dialog.css

React component library

/* stylelint-disable */
.Dialog {
  --dialog-header-item-padding-right: 0;
}
.Dialog .Modal-Window {
    outline: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: none;
    padding: 0;
    inline-size: calc(100% - 64px);
    max-inline-size: var(--modal-width);
    /* stylelint-disable-next-line plugin/use-logical-units */
    max-block-size: calc(100vh - 64px);
  }
.Dialog-InnerContainer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-block-size: 100%;
    overflow: auto;
  }
.Dialog-Header,
  .Dialog-Footer {
    background-color: inherit;
  }
.Dialog-Header {
    padding: var(--dialog-space-size) var(--dialog-space-size)
      var(--dialog-padding-bottom);
  }
.Dialog-Footer {
    padding: var(--dialog-space-size);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
.Dialog-Title {
    margin: 0;
    padding-inline-end: var(--dialog-header-item-padding-right);
  }
.Dialog-Subtitle {
    color: var(--color-content-secondary);
    margin-block-start: var(--dialog-subtitle-margin-top);
    padding-inline-end: var(--dialog-header-item-padding-right);
  }
.Dialog-Body {
    flex-grow: 1;
    max-block-size: 100%;
    padding: 0 var(--dialog-space-size);
    overflow: auto;
  }
.Dialog-Body:first-child {
    margin-block-start: var(--dialog-body-first-child-margin-top);
  }
.Dialog-Body:last-child {
    margin-block-end: var(--dialog-body-last-child-margin-bottom);
  }
.Dialog_variant_small {
      --modal-width: 480px;
    }
.Dialog_variant_medium {
      --modal-width: 720px;
    }
.Dialog_variant_large {
      --modal-width: 960px;
    }
.Dialog_variant_fullsize .Modal-Window {
        inline-size: 100%;
        max-block-size: 100%;
        inset: 0;
        margin: 0;
        border-radius: 0;
        transform: translate(0, 0);
      }
.Dialog_variant_fullsize .Dialog-Footer {
        flex-direction: row-reverse;
      }
.Dialog_size_s {
      --dialog-space-size: 24px;
      --dialog-padding-bottom: 16px;
      --dialog-body-first-child-margin-top: 40px;
      --dialog-body-last-child-margin-bottom: var(--dialog-space-size);
      --dialog-subtitle-margin-top: 4px;
    }
.Dialog_size_s .Dialog-Title {
        font: var(--typography-heading-xl-font);
        letter-spacing: var(--typography-heading-xl-letter_spacing, 0);
        text-transform: var(--typography-heading-xl-text_transform, none);
      }
.Dialog_size_s .Dialog-Subtitle {
        font: var(--typography-text-s-font);
        letter-spacing: var(--typography-text-s-letter_spacing, 0);
        text-transform: var(--typography-text-s-text_transform, none);
      }
.Dialog_size_l {
      --dialog-space-size: 32px;
      --dialog-padding-bottom: 24px;
      --dialog-body-first-child-margin-top: 56px;
      --dialog-body-last-child-margin-bottom: var(--dialog-space-size);
      --dialog-subtitle-margin-top: 8px;
    }
.Dialog_size_l .Dialog-Title {
        font: var(--typography-heading-2xl-font);
        letter-spacing: var(--typography-heading-2xl-letter_spacing, 0);
        text-transform: var(--typography-heading-2xl-text_transform, none);
      }
.Dialog_size_l .Dialog-Subtitle {
        font: var(--typography-text-l-font);
        letter-spacing: var(--typography-text-l-letter_spacing, 0);
        text-transform: var(--typography-text-l-text_transform, none);
      }
.Dialog_hasCloseButton {
    --dialog-header-item-padding-right: 24px;
  }
.IconButtonNext.Dialog-CloseButton {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
}
.Dialog_animation_fullsize-appear .Modal-Window, .Dialog_animation_fullsize-enter .Modal-Window {
      transform: translate(0, 100%);
    }
.Dialog_animation_fullsize-appear-active .Modal-Window, .Dialog_animation_fullsize-enter-active .Modal-Window {
      transition: transform var(--transition-slow);
      transform: translate(0, 0);
    }
.Dialog_animation_fullsize-enter-done .Modal-Window {
      transform: translate(0, 0);
    }
.Dialog_animation_fullsize-exit .Modal-Window {
      visibility: visible;
      transform: translate(0, 0);
    }
.Dialog_animation_fullsize-exit-active .Modal-Window {
      visibility: visible;
      transition: transform var(--transition-slow);
      transform: translate(0, 100%);
    }
.Dialog_animation_fullsize-exit-done .Modal-Window {
      visibility: hidden;
      transform: translate(0, 100%);
    }