/**
 * Page styles
 */

:root {
  --white: #fff;
  --colorA: #777;
  --colorB: #222;
  --colorC: #bbb;
  --colorPop: #ff0000;
  --black: #000;
  font-size: 20px;
}

body {
  background-color: var(--white);
  font-size: 1rem;
}

/**
 * Animation Keyframes
 */

@keyframes dialogIn {
  0% {
    opacity: 0;
    transform: perspective(500px) translate3d(0, 0, 100px);
  }

  100% {
    opacity: 1;
    transform: perspective(500px) translate3d(0, 0, 0);
  }
}

@keyframes dialogOut {
  0% {
    opacity: 1;
    transform: perspective(500px) translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: perspective(500px) translate3d(0, 0, -250px);
  }
}

@keyframes backdrop-fade {
  from {
    background: transparent;
  }

  to {
    background: rgba(0, 0, 0);
  }
}

/**
 * Dialog styles
 */

#dialog-starter-dialog {
  border: 1px solid var(--colorC);
  background-color: var(--white);
  border-radius: 6px;

  overflow: visible;

  &[open] {
    animation: dialogIn 0.5s ease-out;

    &::backdrop {}
  }

  &.is-hidden {
    animation: dialogOut 0.5s ease-out;
  }

  &::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }

  &[open] {
    &::backdrop {
      backdrop-filter: opacity(1) blur(8px);
      animation: backdrop-fade 2s ease forwards;
    }
  }

  &.is-hidden {
    &::backdrop {
      animation: backdrop-fade 3s ease backwards;
      animation-direction: reverse;
    }
  }
}

#dialog-starter {
  display: block;
  /* position: fixed; */

  header {
    margin-bottom: 1rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    >* {
      margin: 0;
    }
  }
}

#dialog-starter__closer {
  background-color: var(--white);
  color: var(--almostblack);
  padding: 4px;
  border: 0;
  border-radius: 50%;
  aspect-ratio: 1/1;
  line-height: 1;

  position: absolute;
  top: -0.5rem;
  right: -0.5rem;

  svg {
    height: auto;
    width: 24px;
  }

  /*   &:focus {
    outline: 3px dotted var(--colorA);
    background-color: var(--colorC);
    color: var(--colorA);
    outline-offset: 2px;
  }
 */

  &:hover {
    cursor: pointer;

    svg g {
      fill: var(--colorPop);
    }
  }
}

#dialog-starter .form__section__buttons .button {
  font-size: 0.875rem;
}

#openDialog {
  font-size: 2rem;
  font-weight: bold;
  padding: 0.25em 0.5em;
  border-radius: 8px;
  margin: auto;
}

p:has(#openDialog) {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  margin-block: 2rem;
}

body:has(dialog[open]) {
  overflow: hidden;
}

:root {
  scrollbar-gutter: stable;
}