.cobalt-modal {
  --dialog-margin-top: 10vh;

  @apply c-p-none c-z-modal;
  position: fixed;
  left: 0;
  top: var(--dialog-margin-top);

  display: flex;
  justify-content: center;

  width: 100%;

  &__overlay {
    @apply c-z-modal-below;
    position: fixed;

    overflow: hidden;

    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);

    inset: 0;
    will-change: opacity;

    &[data-state="open"]:not(.cobalt-modal--skipAnimation__enter) {
      animation: c-fade-in 300ms ease-out;
    }

    &[data-state="closed"]:not(.cobalt-modal--skipAnimation__leave) {
      animation: c-fade-out 200ms ease-in;
    }
  }

  .cobalt-modal__content:not([hidden]) {
    @apply c-bg-surfaceBright;

    position: fixed;

    display: flex;
    flex-direction: column;

    max-height: calc(100% - 2 * var(--dialog-margin-top));
    width: 80vw;

    box-shadow: 0 6px 36px fade-out(black, 0.8);

    @include breakpoint($from: "md") {
      @apply c-rounded-xl;
      max-width: 38rem;
    }

    @include breakpoint($until: "md") {
      position: fixed;
      bottom: 0;

      width: 100%;
      max-height: calc(100% - theme("spacing.xl"));

      border-radius: 16px 16px 0 0;
    }

    &[data-state="open"]:not(.cobalt-modal--skipAnimation__enter) {
      animation: c-slide-in-from-bottom 300ms ease-out;
      @include breakpoint($from: "md") {
        animation: c-slide-in 300ms ease-out;
      }
    }

    &[data-state="closed"]:not(.cobalt-modal--skipAnimation__leave) {
      animation: c-slide-out-to-bottom 200ms ease-in;
      @include breakpoint($from: "md") {
        animation: c-slide-out 200ms ease-in;
      }
    }
  }

  &--fullHeight {
    height: 100%;

    .cobalt-modal__content:not([hidden]) {
      height: 100%;
    }
  }

  &--fullWidth {
    .cobalt-modal__content:not([hidden]) {
      max-width: unset;
    }
  }

  &--fullScreen {
    height: 100%;

    .cobalt-modal__content:not([hidden]) {
      height: 100%;
      max-width: unset;
      max-height: unset;

      border-radius: 0;
    }
  }

  &--overflowHidden {
    .cobalt-modal__content:not([hidden]) {
      overflow: hidden;
    }
  }

  &-footer {
    @apply c-border-t c-border-t-outline c-p-sm;

    &:empty {
      display: none;
    }
  }

  &-header {
    @apply c-border-b c-border-b-outline c-p-md c-gap-sm;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &__title {
      @apply c-text-title-md c-text-onSurface c-m-none c-flex-1;
    }

    &__close-button {
      @apply c-p-none c-cursor-pointer;
      flex: none;
      border: 0;

      background-color: transparent;
    }

    + .cobalt-modal-body__wrapper
      .cobalt-modal-body.cobalt-modal-body--bodySpacing {
      @apply c-pt-sm;
    }
  }

  &-body {
    height: 100%;

    overflow-y: auto;
    overscroll-behavior: contain;

    &--bodySpacing {
      @apply c-py-lg c-px-md;

      &.cobalt-modal-body--hasFooter {
        @apply c-pb-sm;
      }
    }

    &__wrapper {
      display: flex;
      flex-direction: column;

      height: 100%;
      overflow-y: auto;
    }
  }
}