@use "modern-normalize/modern-normalize.css";
@import "reset";
@import "variables";
@import "colors";
@import "button";
@import "shared";
@import "settings";
@import "settings/hide-topics";

html {
  font-size: 62.5%;
}

body {
  background-color: var(--background-primary);
  color: var(--foreground);
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
  gap: 16px;
  margin: 16px;
}

a {
  color: var(--light-blue);

  &:hover {
    color: var(--magenta);
  }
}

details {
  border: 1px solid var(--blue);

  &[open] summary {
    border-bottom: 1px solid var(--blue);
  }

  summary {
    padding: 8px;

    &:hover {
      background-color: var(--blue);
      cursor: pointer;
    }
  }

  .inner {
    padding: 8px;
  }
}

.main-wrapper,
.page-header,
.page-footer,
.user-label-editor {
  margin-left: auto;
  margin-right: auto;
  width: $large-breakpoint;

  @media (max-width: $large-breakpoint) {
    width: 100%;
  }
}

.page-header {
  align-items: center;
  display: flex;

  img {
    height: 4rem;
  }

  h1 {
    align-items: center;
    display: flex;
    gap: 16px;
    margin-right: auto;
  }

  .version {
    align-self: flex-end;
    border-bottom-width: 2px;
    font-weight: bold;
  }
}

.page-footer {
  background-color: var(--background-secondary);
  padding: 16px;

  a {
    font-weight: bold;
  }

  p:not(:last-child) {
    margin-bottom: 8px;
  }
}

.main-wrapper {
  display: grid;
  gap: 16px;
  grid-template-columns: calc($large-breakpoint / 4) auto;
}

.page-aside {
  background-color: var(--background-secondary);
  padding: 8px;

  ul {
    list-style: none;
  }

  li {
    border: 1px solid transparent;
    font-weight: bold;
    padding: 8px;

    &:hover {
      background-color: var(--light-blue);
      border-color: var(--light-blue);
      cursor: pointer;

      .is-new {
        color: var(--dark-blue);
      }
    }

    &:not(:last-child) {
      margin-bottom: 8px;
    }

    &.active {
      border-color: var(--light-blue);
    }

    &.enabled {
      display: flex;

      &::after {
        color: var(--light-green);
        content: "●";
        margin-left: auto;
      }
    }

    .is-new {
      color: var(--light-blue);
      font-weight: bold;
      font-size: 60%;
      vertical-align: top;
    }
  }
}

.page-main {
  background-color: var(--background-secondary);
  padding: 16px;
}