@import 'version.css';

:root {
  --back-color: #222;
  --fore-color: #eee;
  --link-color: #eee;
}

fieldset {
  border: 1px dotted gray;
  border-radius: .25rem;
  padding: 1px;

  .display-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
  }

  legend {
    margin-bottom: .5rem;
  }

  label {
    background: #ddd;
    color: #222;
    border: 1px outset gray;
    border-radius: .3rem;
    display: inline-block;
    padding: .9rem .5rem .9rem .1rem;
    min-width: 7.5rem;

    span {
      display: inline-block;
      margin-left: .2rem;
    }
  }

  [ type = radio ] {
    height: 1rem;
    width: 1rem;
  }
}

output {
  line-height: 1.6;

  &[ aria-live = off ] {
    font-size: small;
  }
}

[ data-success = false ] {
  [ name = output ]::before {
    content: '⚠️';
    display: inline-block;
    font-size: x-large;
    margin-right: .5rem;
  }

  output {
    font-size: medium;
  }
}

form {
  font-size: x-large;

  button {
    font-size: inherit;
    padding: .5rem 1rem;
  }
}

details {
  margin: 2rem 0;

  summary {
    padding: .5rem 0;
  }
}

footer {
  border-top: 1px solid gray;
  margin-top: 2rem;

  delete-cache-button {
    margin-left: .6rem;

    &::part(button) {
      padding: .15rem .5rem;
    }
  }
}

body {
  background-color: var(--back-color);
  color: var(--fore-color);
  font-family: sans-serif;
  margin: auto;
  max-width: 44rem;
  padding: 0 1rem;

  a[ href ] {
    color: var(--link-color);
  }
}

::part(button),
::part(input),
* {
  outline-offset: .2rem;
  text-underline-offset: .2rem;
}

wake-lock {
  &::part(labelText) {
    display: inline-block;
    margin: .2rem;
  }

  &::part(label) {
    padding: .5rem 0;
  }

  &::part(checkbox) {
    height: 1rem;
    width: 1rem;
  }
}

.sr-only,
.visually-hidden {
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute;
}