[data-component="modal"], .modal-component {
  position: relative;

  [data-modal="dialog"], .modal {
    z-index: 10;
    width: 90%;
    max-width: 800px;
    padding: var(--card--padding);
    border: 1px solid var(--_site-theme---modal--border);
    border-radius: var(--card--border-radius);
    background-color: var(--_site-theme---modal--background);
    color: var(--_site-theme---modal--text);
    overflow-y: auto;
    transition: all .3s cubic-bezier(.165, .84, .44, 1);

    &[open] {
      animation: modalFadeIn .4s ease-out forwards;
    }

    &::backdrop {
      background: color-mix(in srgb, var(--_color---neutral--black) 80%, transparent);
    }

    &::-webkit-scrollbar {
      width: 10px;
    }

    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border: 2px solid var(--primary--background);
      border-radius: 10px;
      background: var(--primary--text);

      &:window-inactive {
        background: var(--primary--text);
      }
    }
  }

  [data-modal="close"], .modal_close-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: .5rem .5rem auto auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 4px;
    background-color: transparent;

    &:focus-visible, &[data-wf-focus-visible] {
      outline: 2px solid var(--_site-theme---focus-outline);
      outline-offset: 2px;
    }

    [data-modal="close-icon"], .modal_close-button_icon {
      width: 1rem;
      height: 1rem;
      pointer-events: none;
    }
  }

  [data-modal="trigger"], .modal_trigger-wrap {
    background-color: transparent;

    &:focus-visible, &[data-wf-focus-visible], &:focus-within {
    outline: 2px solid var(--_site-theme---focus-outline);
    outline-offset: 2px;
    }

    * {
      pointer-events: none;
    }
  }
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body:has([data-modal="dialog"][open]), body:has(dialog.modal[open]) {
  overflow: hidden !important;
}