// stylelint-disable-next-line scss/partial-no-import
@import 'utilities';

html {
  font-size: 62.5%;
}

body {
  background-color: darken($background, 5%);
  color: $foreground;
  font-family: sans-serif;
  font-size: 2rem;
}

a,
a:visited {
  color: lighten($blue, 10%);

  &:hover {
    color: $magenta;
  }
}

h1,
h2,
p,
ul {
  margin: 0;
}

ul {
  padding-left: 2rem;
}

button {
  &:hover {
    cursor: pointer;
  }
}

code {
  background-color: darken($background, 5%);
}

details {
  border: 0.25rem solid $blue;
  margin-bottom: 1rem;
  padding: 1rem;

  > summary {
    cursor: pointer;

    &::after {
      content: 'Click to expand.';
    }
  }

  &[open] > summary {
    margin-bottom: 0.25rem;

    &::after {
      content: 'Click to collapse.';
    }
  }
}

p {
  margin-bottom: 1rem;
}

*:last-child > p:last-child {
  margin-bottom: 0;
}

.red-re {
  color: $red;
}

p > .red-re {
  font-weight: bolder;
}

.asterisk-link {
  font-family: monospace;
  text-decoration: none;
}

#wrapper {
  padding: 1rem;
}

#header {
  align-items: center;
  display: flex;
  padding-bottom: 1rem;

  > img {
    height: 4rem;
    margin: 0 1rem 0 0;
  }

  > h1 {
    margin-right: auto;
  }

  > #version {
    align-self: flex-end;
  }
}

#main {
  background-color: $background;
  border-top: 0.25rem solid $blue;
  border-bottom: 0.25rem solid $cyan;
  display: grid;
  grid-template-columns: 35% 65%;
  padding: 1rem;
}

#settings-list {
  display: flex;
  flex-direction: column;
  margin-right: 1rem;

  > a {
    background-color: lighten($background, 5%);
    border-bottom: 0.25rem solid darken($background, 5%);
    color: $foreground;
    padding: 2rem;

    &:last-child {
      border-bottom: none;
    }

    &:hover:not(.active) {
      background-color: darken($blue, 20%);
      cursor: pointer;
    }

    &.active {
      background-color: darken($blue, 10%);
    }
  }
}

.setting {
  > header {
    border-bottom: 0.25rem solid $red;
    margin-bottom: 1rem;
    display: flex;
    padding-bottom: 0.5rem;

    > h2 {
      margin-right: auto;
    }

    > button {
      align-self: flex-start;
      background-color: $red;
      border: none;
      color: $foreground;
      padding: 0.5rem;
      min-width: 10rem;

      &:hover {
        background-color: darken($red, 10%);
      }
    }
  }

  &.enabled > header {
    border-color: $green;

    > button {
      background-color: $green;

      &:hover {
        background-color: darken($green, 10%);
      }
    }
  }

  &:not(.active) {
    display: none;
  }
}

#debug {
  display: flex;
  flex-direction: column;
  height: 100%;

  &:not(.active) {
    display: none;
  }

  &-buttons {
    align-self: flex-end;
    margin-top: auto;
  }
}

#footer {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

#copy-bug-template-button,
#log-stored-data-button,
#remove-all-data-button {
  align-self: flex-end;
  border: none;
  color: $foreground;
  padding: 0.5rem 1rem;
  width: auto;
}

#copy-bug-template-button,
#log-stored-data-button {
  background-color: $blue;

  &:hover {
    background-color: darken($blue, 10%);
  }
}

#remove-all-data-button {
  background-color: $red;

  &:hover {
    background-color: darken($red, 10%);
  }
}

@media (min-width: $large-breakpoint) {
  #wrapper {
    margin: 0 auto;
    width: $large-breakpoint;
  }
}