dialog.wco-modal {
  --wco-modal-size: 640px;
  --wco-modal-padding: var(--wco-spacing-xl) var(--wco-spacing-md);
  --wco-modal-bg: var(--wco-color-neutral-50);
  --wco-modal-border-radius: var(--wco-radius-sm);
  --wco-modal-shadow: var(--wco-shadow-level-2);
  --wco-animate-modal-top: 10px;
  --wco-animate-modal-opacity: 0;
  background-color: transparent;
  box-shadow: none;
  container-name: modalWco;
  container-type: inline-size;
  border: none;
  place-items: center;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  display: none;
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    transform 0.7s ease-in-out allow-discrete;
  &[open] {
    display: grid;
    main { 
      margin: var(--wco-spacing-lg);
      --wco-animate-modal-top: 0;
      --wco-animate-modal-opacity: 1;
      transition: all 300ms ease-in-out allow-discrete;
      @media screen and (max-width: 768px){
        margin: 0;
      }
      @starting-style {
        --wco-animate-modal-top: 10px;
        --wco-animate-modal-opacity: 0;
      }
    }
  }
  > main {
    position: relative;
    min-width: var(--wco-modal-size);
    width: min-content;
    background-color: var(--wco-modal-bg);
    border-radius: var(--wco-modal-border-radius);
    box-shadow: var(--wco-modal-shadow);
    padding: var(--wco-modal-padding);
    display: flex;
    flex-direction: column;
    opacity: var(--wco-animate-modal-opacity);
    transform: translateY(var(--wco-animate-modal-top));
    transition: all 0.4s ease-in-out;
    @media screen and (max-width: 768px){
      --wco-modal-size: calc(100vw - var(--wco-spacing-md));
      --wco-modal-padding: var(--wco-spacing-xs) var(--wco-spacing-xxs);
    }
    
    @media screen and (max-width: 550px){
      --wco-modal-padding: var(--wco-spacing-xxxs) var(--wco-spacing-nano);
    }

  }
  button.wco-modal--close {
    padding: var(--wco-spacing-nano);
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--wco-font-size-md);
    color: var(--wco-color-primary-700);
    transition: color 0.3s;
    &:hover {
      color: var(--wco-color-primary-500);
    }
  }
  &::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    transition:
    display 0.1s allow-discrete,
    overlay 0.1s allow-discrete,
    background-color 0.1s;
  }
}