/*
  CSS DIRECTORY
    1. =GLOBAL
    2. =CALCULATOR
*/

/* ===GLOBAL=== */

:root {
  color-scheme: light;

  --clr-bg: hsl(from var(--clr-fg) h s calc(l - 10));
  --clr-mg: hsl(from var(--clr-fg) h s calc(l - 5));
  --clr-fg: hsl(0 0 100);
  --clr-txt: hsl(0 0 15);
  --clr-border: hsl(0 0 0 / 10%);
  --clr-btn-ac: hsl(0 75 55);
  --clr-btn-op: hsl(from var(--clr-txt) h s calc(l + 20));

  --ff: Inter, system-ui, sans-serif;
  --font-display: 600 2.5rem var(--ff);
  --font-buttons: 500 2rem var(--ff);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --clr-fg: hsl(0 0 15);
    --clr-txt: hsl(0 0 95);
    --clr-border: hsl(0 0 100 / 5%);
    --clr-btn-op: hsl(from var(--clr-txt) h s calc(l - 25));
  }

  .btn--all-clear,
  .btn--operator {
    --clr-border: hsl(0 0 0 / 10%);
  }

  .btn--all-clear {
    --clr-fg: hsl(from var(--clr-txt));
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  color: inherit;
  line-height: calc(1em + 0.5em);
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  background-color: var(--clr-bg);
  color: var(--clr-txt);
}

/* ===CALCULATOR=== */

button,
main,
.display {
  border: 3px solid var(--clr-border);
  border-radius: 15px;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  padding: 1em;
  background-color: var(--clr-fg);
  font: var(--font-buttons);

  &:hover,
  :focus {
    cursor: pointer;
    box-shadow: inset 0 0 999px 999px var(--clr-border);
  }
}

main {
  display: flex;
  flex-direction: column;
  gap: 1.75em;
  width: 22rem;
  padding: 1.675rem 1.25rem;
  background-color: var(--clr-mg);
}

/* --Display-- */

.display {
  padding: 0.25em;
  background-color: var(--clr-fg);
  font: var(--font-display);
  text-align: right;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;

  &:hover {
    cursor: pointer;
  }
}

/* --Button Pad-- */

.buttons,
.row {
  display: flex;
  gap: 0.5rem;
}

.buttons {
  flex-wrap: wrap;
  width: fit-content;
}

.btn--all-clear,
.btn--operator {
  color: var(--clr-fg);
}

.btn--all-clear {
  background-color: var(--clr-btn-ac);
}

.btn--operator {
  background-color: var(--clr-btn-op);
}