:root {
  --form-color: var(--blockquote-color);
  --form-background-color: var(--blockquote-background-color);
  --form-border-color: rgba(from var(--form-color) r g b / 0.5);
  --form-outline-width: calc(2 * var(--border-width));
  --form-outline-color: rgba(from var(--form-color) r g b / 0.3);

  --button-color: var(--blockquote-color);
  --button-background-color: var(--blockquote-background-color);
  --button-border-color: rgba(from var(--button-color) r g b / 0.5);
}

html {
  scroll-behavior: smooth;
}

main {
  nav {
    margin-bottom: 1.5em;
  }

  section {
    margin: 1.5rem 0 1rem 0;
  }
}

aside.dma {
  footer p {
    margin: 0;
  }
}

mark {
  background-color: var(--b-color);
  padding: 0 0.1em;
}

button,
a[role="button"] {
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--button-border-color);

  display: inline-block;
  padding: 0.35em 0.5em;

  cursor: pointer;
  text-align: center;
  text-decoration: none;

  color: var(--blockquote-color);
  background: var(--blockquote-background-color);

  transition: all var(--transition-duration) ease-in-out;

  font-size: 0.9em;
  font-weight: 600;
  line-height: inherit;

  &[disabled] {
    cursor: not-allowed;
    border-style: dashed;
  }

  &:hover:not([disabled]),
  &:focus {
    filter: brightness(1.2) contrast(0.8);
    border-color: var(--form-color);
  }

  &:focus {
    outline: var(--form-outline-width) solid var(--form-outline-color);
  }

  &.invert,
  &.primary {
    background-color: var(--menu-color);
    color: var(--background-color);
  }
}

main {
  h1 {
    font-size: 2.5em;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 1.5em;
    margin-bottom: 1rem;
  }
}

hgroup {
  margin: 1.5rem 0 1rem 0;

  & > h1,
  & > h2,
  & > h3 {
    margin: 0;
    margin-bottom: 0.25rem;
  }

  & > p {
    margin: 0;
    font-size: 0.9em;
  }
}

main > section {
  margin-top: 0;
}

section {
  & > table,
  & > footer {
    margin: 1em 0;
  }

  &.admin {
    & > h1,
    & > h2,
    & > h3,
    & > hgroup > h1,
    & > hgroup > h2,
    & > hgroup > h3 {
      &::after {
        content: "[admin]";
        font-size: 0.5em;
        font-weight: normal;
        color: var(--r-color);
        margin-left: 0.5rem;
        vertical-align: super;
      }
    }
  }
}

table.list {
  th {
    border-bottom: none;
    padding-right: 0;
    text-align: right;
    vertical-align: baseline;
    white-space: nowrap;

    &::after {
      content: ":";
      color: var(--menu-color);
      font-weight: 400;
    }
  }

  td {
    width: 100%;
    padding-left: 0.5em;
  }
}

form {
  &:empty {
    display: none;
  }

  label {
    display: block;
    margin: 1rem 0;

    & > p:not(:last-child) {
      margin: 0;
    }

    & > :not(:first-child) {
      font-size: 0.9em;
    }

    & > :last-child {
      margin-top: 0.5em;
      font-size: 0.9em;
    }
  }

  input,
  select,
  textarea {
    width: 100%;
    color: var(--form-color);
    background-color: var(--form-background-color);
    border: var(--border-width) solid var(--form-border-color);
    border-radius: var(--border-radius);
    padding: 0.5rem 1em;
    outline: var(--form-outline-width) solid transparent;

    transition: all var(--transition-duration) ease-in-out;

    &:focus {
      border-color: var(--form-color);
      outline: var(--form-outline-width) solid var(--form-outline-color);
    }

    &[disabled] {
      border-style: dashed;
    }

    &[readonly] {
      background-color: var(--background-color);
    }
  }

  input[type="checkbox"],
  input[type="radio"] {
    appearance: none;
    font: inherit;
    color: currentColor;

    display: inline-grid;
    place-content: center;

    width: 1.5em;
    height: 1.5em;
    vertical-align: bottom;
    border: var(--border-width) solid var(--form-border-color);
    margin-right: 0.25em;
    padding: 0;

    &::before {
      content: "";
      width: 1em;
      height: 1em;

      opacity: 0;
      transform: scale(0);
      transition: var(--transition-duration) opacity ease-in-out;

      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      background-color: var(--form-color);
    }

    &:checked::before {
      opacity: 1;
      transform: scale(1);
    }

    &[disabled] {
      border-style: dashed;
    }

    &[readonly] {
      background-color: var(--background-color);
    }
  }

  footer {
    margin: 1em 0;
    text-align: right;
  }
}

form.inline {
  display: inline-block;
  margin: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);

  &.dashed {
    border-top-style: dashed;
  }
}

main {
  details {
    background-color: var(--background-color);
    margin: 1rem 0;

    summary {
      cursor: pointer;
      padding: 0.25em 0;
    }

    &[open] summary {
      font-weight: 700;
    }

    & > *:not(summary) {
      margin-left: 1rem;
      margin-right: 1rem;
    }

    &.notecard summary::before {
      content: none;
    }
  }
}

@media (max-width: 480px) {
  main.dma {
    padding-bottom: 1em;
  }

  aside.dma .footer {
    /* TODO: move this to upstream site */
    padding-left: 1em;
    padding-right: 1em;
  }

  aside.dma .navigation {
    font-size: 0.9em;
  }
}

/*
@mixin mobile {
  @media (max-width: 480px) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: 481px) {
    @content;
  }
}
*/