brk/website/styles/elements.css

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

  background-color: transparent;

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

a {
  color: inherit;
  display: flow-root;
  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;
  }

  &:active {
    text-decoration-color: inherit;
  }

  &[target="_blank"]::after {
    color: var(--off-color);
    content: "↗";
    font-weight: 400;
    font-size: 1rem;

    margin-top: 0.1rem;
    margin-left: 0.375rem;
    line-height: 1;

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

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

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

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

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

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 {
  padding: 0;
  cursor: pointer;
  text-transform: inherit;
}

h1 {
  font-size: 2rem;
  line-height: var(--line-height-xl);
}

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

h1,
h2,
h3 {
  font-family: instrument;
  letter-spacing: 0.05rem;
  font-weight: 400;
}

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

input {
  width: 100%;
  padding: 0;
  letter-spacing: inherit;

  &::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 {
        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) {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

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

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

select {
  cursor: pointer;
  appearance: none;
  flex-shrink: 0;
  width: 100%;
  text-transform: uppercase;
  color: var(--color);
}

:is(input, select):focus-visible {
  outline: none;
}

summary > small {
  margin-left: 0.375rem;
  opacity: 0.5;
}

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

  select + & {
    font-size: var(--font-size-xs);

    + span {
      color: var(--off-color);
      font-weight: 400;
      font-size: 1rem;
      line-height: 1;
    }
  }
}

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

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

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

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

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

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

[data-resize] {
  user-select: none;
}

[hidden] {
  display: none !important;
}