/* Daniel Fletcher */
/* The Odin Project: Foundations */
/* Calculator */


@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');


/* --- GENERAL PROPERTIES --- */
:root {
  --button-width: 5rem;
  --button-height: 3rem;

  --font-buttons: 'Roboto Slab', system-ui, serif;
  --font-display: 'Chakra Petch', sans-serif;

  --vanilla-primary: #EBEBEB;
  --vanilla-buttons: #CCDCDC;
  --vanilla-operations: #9AA6AB;
  --vanilla-equals: #CFCED7;
  --vanilla-display: #474350;

  --chocolate-primary: #795C5F;
  --chocolate-buttons: #F2E29F;
  --chocolate-operations: #FADF7F;
  --chocolate-equals: #D9B26F;
  --chocolate-display: #0C1B33;

  --strawberry-primary: #FFB8DE;
  --strawberry-buttons: #FFDDE1;
  --strawberry-operations: #FF74D4;
  --strawberry-equals: #FF36AB;
  --strawberry-display: #302F4D;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: slategray;
  background-image: radial-gradient(lightblue 0%, transparent 87.5%);

  min-height: calc(var(--button-height) * 16);
}

button:active {
  box-shadow: inset 1px 1px 5px black;
}


/* --- CALCULATOR LAYOUT --- */
.calculator {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border: 7.5px groove black;
  padding: 0.75rem 0;

  width: calc(var(--button-width) * 4.675);
  height: calc(var(--button-height) * 12)
}

.display-container {
  display: flex;
  flex-direction: column;
  justify-content: center;

  font-size: 1.5rem;
  padding: 2px 8px;

  width: calc(var(--button-width) * 4 + 0.1875rem);
  height: calc(var(--button-height) * 0.875);
}

.display-content {
  font-family: var(--font-display);
  font-size: 2rem;
  text-align: right;

  width: 100%;
  height: 100%;
}

.calc-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.calc-row-0 {
  border-top: 1px solid rgb(0, 0, 0, 25%);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.calc-row-1, .calc-row-6 {
  border-bottom: 1px solid rgb(0, 0, 0, 25%);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

.calc-row-colors {
  display: flex;
  justify-content: space-around;
  width: 87.5%;
}


/* --- CALCULATOR BUTTONS --- */
.calc-row > button {
  border: 2.5px solid black;
  border-radius: 0.25em;
  font-family: var(--font-buttons);
  font-size: 1.5rem;
  margin: 0.125em;

  width: var(--button-width);
  height: var(--button-height);
}

button.operator-squared, button.operator-nth-power,
button.operator-square-root, button.operator-nth-root,
button.operator-log-base-2, button.operator-natural-log {
  font-size: 1.25rem;
}

sub, sup {
  font-size: 0.875rem;
}

.calc-row > button.digit-0 {
  width: calc(var(--button-width) * 2.0675);
}

.radical {
  font-size: 1.5rem;
}

.radicand {
  border-top: 1.125px solid black;
  font-size: 1.25rem;
}


/* --- COLOR THEMES --- */
.theme-vanilla {
  background-color: var(--vanilla-primary);
}

.theme-vanilla button {
  background-color: var(--vanilla-operations);
}

.theme-vanilla .digit,
.theme-vanilla .calc-row-0 button,
.theme-vanilla .calc-row-1 button,
.theme-vanilla .calc-row-colors button {
  background-color: var(--vanilla-buttons);
}

.theme-vanilla > .display-container, .theme-vanilla .display-content {
  background-color: var(--vanilla-display);
  color: white;
}

.theme-vanilla .func-equals {
  background-color: var(--vanilla-equals);
}

.theme-chocolate {
  background-color: var(--chocolate-primary);
}

.theme-chocolate button {
  background-color: var(--chocolate-operations);
}

.theme-chocolate .digit,
.theme-chocolate .calc-row-0 button,
.theme-chocolate .calc-row-1 button,
.theme-chocolate .calc-row-colors button {
  background-color: var(--chocolate-buttons);
}

.theme-chocolate > .display-container, .theme-chocolate .display-content {
  background-color: var(--chocolate-display);
  color: white;
}

.theme-chocolate .func-equals {
  background-color: var(--chocolate-equals);
}

.theme-strawberry {
  background-color: var(--strawberry-primary);
}

.theme-strawberry button {
  background-color: var(--strawberry-operations);
}

.theme-strawberry .digit,
.theme-strawberry .calc-row-0 button,
.theme-strawberry .calc-row-1 button,
.theme-strawberry .calc-row-colors button {
  background-color: var(--strawberry-buttons);
}

.theme-strawberry > .display-container, .theme-strawberry .display-content {
  background-color: var(--strawberry-display);
  color: white;
}

.theme-strawberry .func-equals {
  background-color: var(--strawberry-equals);
}


/* --- COLOR THEME BUTTONS --- */
button.color {
  border: 2.25px solid black;
  border-radius: 12.5%;
  font-size: 2.25rem;
  text-shadow: 1px 2.25px 2.5px black;

  width: 4.5rem;
  height: 4.5rem;
}

.color-vanilla {
  color: var(--vanilla-primary);
}

.color-chocolate {
  color: var(--chocolate-primary);
}

.color-strawberry {
  color: var(--strawberry-primary);
}