:root {
  --color-scheme: light dark;
  color-scheme: var(--color-scheme, light dark);
}

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
}

html {
  height: 100%;
}

body {
  color: #e6e6e6;
  font-family: "Recursive Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100%;
}

button {
  font-family: "Recursive Sans", ui-sans-serif, system-ui, sans-serif;
}

button:not([disabled]) {
  cursor: pointer;
  transition: background-color 100ms ease;
}

dialog {
  margin: auto;
  width: calc(100vw - 3rem);
  max-width: 64rem;
  border-radius: 3px;

  &.dialog--small {
    max-width: 32rem;
  }

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

  & > form[method="dialog"] {
    display: contents;
  }

  & .dialog__header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid light-dark(hsl(0deg 0% 90%), hsl(0deg 0% 15%));
    display: flex;
    justify-content: space-between;

    & > h2 {
      font-size: 1.25rem;
      line-height: 1.25rem;
      font-weight: 600;
    }

    & > button {
      padding: 0;
      margin: 0;
      background-color: transparent;
      color: light-dark(hsl(0deg 0% 50%), hsl(0deg 0% 85%));
      height: 1.25rem;
      width: 1.25rem;

      &:hover {
        color: light-dark(hsl(0deg 60% 50%), hsl(0deg 50% 60%));
      }
    }
  }

  & .dialog__body {
    padding: 1rem 1.5rem;
  }

  & .dialog__footer {
    padding: 1rem 1.5rem;
    background-color: light-dark(hsl(0deg 0% 96%), hsl(250deg 10% 14%));
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;

    & > button[type="reset"] {
      background-color: light-dark(hsl(0deg 25% 90%), hsl(0deg 20% 20%));
      color: light-dark(hsl(0deg 75% 25%), hsl(0deg 50% 85%));
      &:hover {
        background-color: light-dark(hsl(0deg 50% 80%), hsl(0deg 40% 40%));
      }
    }
  }
}