brk/website/styles/elements.css

* {
  border-color: var(--border-color) !important;
  border-style: solid !important;

  &::selection {
    color: var(--white);
    background-color: var(--orange);
  }
}

a {
  display: flow-root;
  align-items: baseline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--off-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    text-decoration-style: solid;
    &,
    &::after,
    * {
      color: var(--color) !important;
    }
  }

  &:active {
    &,
    *,
    &::after {
      color: var(--orange) !important;
    }
    text-decoration-color: inherit;
  }

  &[target="_blank"]::after {
    color: var(--off-color);
    content: "↗";
    align-self: baseline;
    font-size: 75%;
    margin-left: 0.25rem;
    line-height: 1;

    &:hover {
      text-decoration: none;
    }
  }
}

aside {
  min-width: 0px;
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  flex: 1;

  @media (max-width: 767px) {
    padding-bottom: calc(var(--main-padding) + 1.5rem);

    html[data-display="standalone"] & {
      padding-bottom: calc(var(--main-padding) + 2rem);
    }
  }

  @media (min-width: 768px) {
    border-left: 1px;
    order: 2;
    margin-bottom: 0rem;
  }

  body > &[hidden] {
    display: flex !important;
  }
}

b {
  font-weight: 700;
}

body {
  font-weight: var(--font-weight-base);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;

  @media (min-width: 768px) {
    flex-direction: row;

    html[data-display="standalone"] & {
      border-top: 1px;
    }
  }
}

button {
  cursor: pointer;
  text-transform: inherit;

  &:disabled {
    color: var(--off-color);
  }

  &:hover {
    &,
    &::after,
    * {
      color: var(--color) !important;
    }
  }

  &:active {
    &,
    &::after,
    * {
      color: var(--orange) !important;
    }
  }
}

details {
  display: block;
}

div {
  &:has(> * + button[type="reset"]) {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;

    button {
      color: var(--off-color);
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);
    }
  }
}

h1,
h2 {
  text-transform: uppercase;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
  font-weight: 350;
}

h3 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

h4 {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

hr {
  width: 100%;
}

html {
  background-color: var(--background-color);
  color: var(--color);
  scrollbar-color: var(--off-color) var(--background-color);
  scrollbar-width: thin;
  overflow: hidden;
  interpolate-size: allow-keywords;
}

input {
  text-transform: inherit;
  border: 0;
  width: 100%;
  text-align: left;

  &:focus-visible {
    outline: none;
  }

  &::placeholder {
    color: var(--off-color);
  }

  label > & {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

label {
  &:has(input) {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    color: var(--off-color);
    position: relative;
    pointer-events: all;

    > span.main {
      display: flex;
      align-items: center;
      gap: 0.25rem;

      > span.colors {
        margin-top: 0.15rem;
        display: flex;
        width: 0.625rem;
        height: 0.625rem;
        flex-direction: column;
        overflow: hidden;
        border-radius: 9999px;

        > span {
          flex: 1;
        }
      }
    }

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

    &:active {
      color: var(--orange);
    }

    > *:not(input):not(svg) {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    > *:not(input) + * {
      margin-top: -0.5rem;
    }
  }

  &:has(input:checked) {
    color: var(--color);
    font-style: normal;
  }
}

main {
  order: 1;
  position: relative;
  display: flex;

  @media (max-width: 767px) {
    flex: 1;
    min-height: 0;
    width: 100% !important;
  }

  @media (min-width: 768px) {
    min-width: 300px;
    width: var(--default-main-width);
    max-width: 65dvw;
  }

  > footer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    text-transform: uppercase;
    margin: var(--main-padding) 0;
    z-index: 100;
    pointer-events: none;
    justify-content: center;

    @media (max-width: 767px) {
      html[data-display="standalone"] & {
        margin-bottom: calc(var(--main-padding) + 0.5rem);
      }
    }

    > fieldset {
      display: flex;
      gap: 1.25rem;
      overflow-x: auto;
      scrollbar-width: thin;
      min-width: 0;
      margin: -0.5rem 0;
      padding: 0.5rem var(--main-padding);
      pointer-events: auto;

      > label,
      > button {
        flex-shrink: 0;
      }

      > button {
        color: var(--off-color);
      }
    }
  }

  > #resize-bar {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    margin: 0 -2px;
    z-index: 50;

    html[data-resize] &,
    &:hover {
      border-right: 4px;
      cursor: col-resize;
      border-color: var(--off-color) !important;
    }

    @media (min-width: 768px) {
      display: block;
    }
  }
}

object {
  background-color: white;
}

select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="gray"><path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>')
    100% 50% no-repeat transparent;
  flex: 1;

  &:focus-visible {
    border: 0;
    outline: none;
  }
}

nav,
search {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--main-padding);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--bottom-area);
}

sup {
  opacity: 0.5;
  margin-left: 0.25rem;
  font-weight: 500;
}

small {
  color: var(--off-color);
  font-weight: var(--font-weight-base);

  h4 + & {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
}

span {
  &.name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

strong {
  color: var(--orange);
}

summary {
  list-style: none;
  display: block;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &::marker,
  &::-webkit-details-marker {
    display: none;
  }

  &:hover {
    &,
    * {
      color: var(--color) !important;
    }
  }

  &:active {
    &,
    * {
      color: var(--orange) !important;
    }
  }
}

@media (min-width: 768px) {
  .md\:hidden {
    display: none !important;
  }
}