@layer base, utility, page;

@layer base {
  * {
    box-sizing: border-box;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  *::-webkit-scrollbar {
    display: none;
  }

  html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: arial;

    margin: 0;
    padding: 0;
  }

  a,
  button {
    text-decoration: none;
    font-weight: bold;
  }

  :where(button) {
    display: inline;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
  }
}

@layer utility {
  body {
    --bb-color-blue: rgb(85, 119, 187);
    --bb-color-red: #cc2244;
    --bb-color-red-bright: #ff4466;
  }

  .bb-link-padding {
    @media not (pointer: fine) {
      &:is(a, button) {
        padding: 0.8rem;
      }
    }
  }

  .bb-admin-only {
    opacity: 0.6;
    color: pink;
  }

  .bb-flex-spacer {
    flex-grow: 1;
  }

  .bb-text-normal {
    font-size: 1rem;
  }

  .bb-text-small {
    font-size: 0.8rem;
  }

  .bb-text-center {
    text-align: center;
  }

  .bb-padding-y-normal {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  body:has(.bb-body) {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100%;

    & main {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-grow: 1;

      padding: 1rem;

      &.m-center {
        justify-content: center;
      }
    }

    & header,
    & footer {
      position: sticky;

      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;

      margin: 0;
    }

    & > header {
      top: 0;
    }

    & > footer {
      bottom: 0;
    }

    &:has(.bb-body.m-dark) {
      background-color: black;
      color: white;

      & header,
      footer {
        background-color: black;

        width: 100%;

        text-align: center;
      }

      & :where(h1, h2, h3, h4, h5, h6, title, a) {
        color: var(--bb-color-blue);
      }

      & a {
        &:where(:link) {
          color: var(--bb-color-red);
        }

        &:where(:visited) {
          color: var(--bb-color-red);
        }

        &:where(:hover) {
          color: var(--bb-color-red-bright);
        }

        &:where(:active) {
          color: #ffffff;
        }
      }

      & .bb-nav {
        color: var(--bb-color-blue);

        & :where(a) {
          color: inherit;
        }
      }
    }
  }
}