.mykn-modal {
  border: 1px solid var(--typography-color-border);
  background: transparent;
  box-sizing: border-box;
  display: block;
  inset-block-start: 0;
  inset-block-end: 0;
  transition: transform var(--animation-duration-medium)
    var(--animation-timing-function);
  margin: 0;
  max-height: 100%;
  opacity: 0;
  overflow: visible; // Allow DatePicker to overflow Card and Modal.
  padding: 0;
  position: fixed;
  z-index: 9999;

  &[hidden] {
    display: none;
  }

  &::backdrop {
    background-color: var(--modal-shadow);
  }

  &--position-float {
    border-radius: var(--sizes-border-radius-s);
    margin: auto;

    &[open] {
      animation: slide-top-center;
      animation-duration: var(--animation-duration-medium);
      animation-timing-function: var(--animation-timing-function);
      animation-direction: normal;
      animation-fill-mode: forwards;
    }
  }

  // TODO: RTL support
  &--position-side {
    inset-inline-start: 100%;
    inset-inline-end: 0;

    &[open] {
      animation: slide-side-center;
      animation-duration: var(--animation-duration-medium);
      animation-timing-function: var(--animation-timing-function);
      animation-direction: normal;
      animation-fill-mode: forwards;
    }

    position: fixed;
    height: 100%;

    > .mykn-card {
      border-radius: 0;
    }

    // TODO: Investiage improvement.
    .mykn-card > .mykn-body,
    .mykn-card > .mykn-body .mykn-form,
    .mykn-card > .mykn-body .mykn-form__fieldset:first-of-type:last-of-type {
      height: 100%;
    }

    .mykn-card > .mykn-body .mykn-button:first-child:last-child {
      width: 100%;
    }
  }

  &--size-m {
    width: 470px;
  }

  &--size-s {
    width: 280px;
  }

  &--type-dialog#{&}--position-float {
    box-shadow: 0 0 20px var(--modal-shadow);
  }

  &--type-dialog#{&}--position-side {
    box-shadow: -4px 0 20px var(--modal-shadow);
  }
}

@keyframes slide-top-center {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-side-center {
  from {
    opacity: 0;
    transform: translateX(0%);
  }
  to {
    opacity: 1;
    transform: translateX(-100%);
  }
}