/* Fonts. */

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400, 500;
  src: url(/fonts/RobotoCondensed.ttf) format("truetype");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400, 500;
  src: url(/fonts/SpaceGrotesk.ttf) format("truetype");
}

/* Global styles. */

html {
  --color-light-1: #ecdbba;
  --color-light-2: #bab2a2;
  --color-dark-1: #191919;
  --color-dark-2: #7e7867;
  --color-accent-1: #c84b31;
  --color-accent-2: #a83e29;

  --font-sans: "Roboto Condensed", "Roboto", Arial, Helvetica, sans-serif;
  --font-display: "Space Grotesk", "Roboto", Arial, Helvetica, sans-serif;

  background-color: var(--color-dark-1);
  color: var(--color-light-1);
  font-family: var(--font-sans);
}

body {
  margin: 16px;
}

a {
  color: var(--color-light-1);
  text-decoration: none;
}

h1 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 32px;
  font-weight: 400;
  margin-top: 48px;
  margin-bottom: 24px;
}

dialog {
  background-color: #312e33;
  border: none;
  color: var(--color-light-1);
  width: calc(100% - 64px);

  h1 {
    margin: 0;
  }
}

::backdrop {
  background-color: #191919e5;
}

details {
  border-top: 1px solid var(--color-dark-2);
  border-bottom: 1px solid var(--color-dark-2);
}

.filter-bar {
  display: flex;
  flex-direction: row;
  height: 44px;
  align-items: center;
  gap: 4px;
  color: var(--color-light-1);
  font-size: 14px;
  line-height: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  cursor: pointer;

  /* Hide the built-in chevron in the <details> element. */
  list-style: none;
}

.filter-chevron {
  transition: transform 200ms cubic-bezier(0.83, 0, 0.17, 1);
}

details:open .filter-chevron {
  transform: rotate(180deg);
}

/* Index / album tile grid. */

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-gap: 16px;
  row-gap: 24px;
}

.index-search-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-accent-1);
  width: 64px;
  height: 64px;
  border-radius: 64px;
}

.index-empty-space {
  display: block;
  height: 100px;
}

/* Search page. */

.search-field {
  width: 100%;
  background: none;
  color: var(--color-light-1);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-light-1);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 32px;
  padding: 0;
}

.search-field-button {
  background: none;
  border: none;
  padding: 8px;
  line-height: 24px;
  position: absolute;
  right: 8px;
  width: 48px;
  height: 48px;
  text-align: center;
}

.search-result-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

/* Edit page. */

.edit-field {
  width: 100%;
  box-sizing: border-box;
  background: none;
  color: var(--color-light-1);
  border: 1px solid var(--color-dark-2);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 22px;
  padding: 13px 16px;
}

.edit-field-label {
  color: var(--color-light-2);
  font-size: 16px;
  margin-top: 24px;
  margin-bottom: 4px;
}

.edit-chip {
  border-color: var(--color-light-1);
  color: var(--color-light-1);
  cursor: pointer;
}

.chip-input:checked + .edit-chip,
.chip[data-checked="true"] {
  background-color: var(--color-light-1);
  color: var(--color-dark-1);

  img {
    filter: invert(1);
  }
}

/* Common elements. */

.accent-button {
  display: flex;
  width: 100%;
  height: 48px;
  border: none;
  background-color: var(--color-accent-2);
  color: var(--color-light-1);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.outline-button {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  border: 1px solid var(--color-light-1);
  color: var(--color-light-1);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.minimal-button {
  display: flex;
  width: 100%;
  height: 48px;
  border: none;
  background: none;
  color: var(--color-light-2);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-light-1);
  border: 1px solid var(--color-light-1);
  border-radius: 100px;
  background: none;
}

.chip-input {
  display: none;
}

/* Keeps the image square, adding padding as necessary. */
.square-image {
  object-fit: contain;
  aspect-ratio: 1;
}

/* Flex utilities. */

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-col-reverse {
  display: flex;
  flex-direction: column-reverse;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

.gap-4 {
  gap: 4px;
}

.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

.gap-24 {
  gap: 24px;
}

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

/* Font/text utilities. */

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-sans {
  font-family: var(--font-sans);
}

.font-display {
  font-family: var(--font-display);
}

.text-16 {
  font-size: 16px;
  line-height: 20px;
}

.text-18 {
  font-size: 18px;
  line-height: 22px;
}

.text-24 {
  font-size: 24px;
  line-height: 32px;
}

.text-32 {
  font-size: 32px;
  line-height: 40px;
}

/* Color utilities. */

.text-light-1 {
  color: var(--color-light-1);
}

.text-light-2 {
  color: var(--color-light-2);
}

.border-light-1 {
  border-color: var(--color-light-1);
}

.border-light-2 {
  border-color: var(--color-light-2);
}

/* Margin utilities. */

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-32 {
  margin-top: 32px;
}

.mb-16 {
  margin-bottom: 16px;
}

/* Padding utilities. */

.p-4 {
  padding: 4px;
}

/* Size utilities. */

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

/* Display/position utilities. */

.block {
  display: block;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.hidden {
  display: none;
}

.bottom-0 {
  bottom: 0;
}

.right-0 {
  right: 0;
}

/* Misc utilities. */

.pointer {
  cursor: pointer;
}