/**
 * base styles and typography
 * ---------------
 */
:root {
  --orange-050: #ffe8d9;
  --orange-100: #ffd0b5;
  --orange-200: #ffb088;
  --orange-300: #ff9466;
  --orange-400: #f9703e;
  --orange-500: #f35627;
  --orange-600: #de3a11;
  --orange-700: #c52707;
  --orange-800: #ad1d07;
  --orange-900: #841003;

  --grey-050: #f5f7fa;
  --grey-100: #e4e7eb;
  --grey-200: #cbd2d9;
  --grey-300: #9aa5b1;
  --grey-400: #7b8794;
  --grey-500: #616e7c;
  --grey-600: #52606d;
  --grey-700: #3e4c59;
  --grey-800: #323f4b;
  --grey-900: #1f2933;
}

/*******************
 Base styles
 *******************/
html {
  font-size: 150%;
  font-weight: 300;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  line-height: 1.4;
}

body {
  display: flex;
  background: #232526;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/*******************
 Calculator
 *******************/
.calculator {
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.3);
  border-radius: 0.5em;
  overflow: hidden;
}

.calculator__display {
  background-color: var(--grey-800);
  color: var(--grey-050);
  width: 16.25rem;
  padding: 0.75rem 1rem;
  text-align: right;
  font-size: calc(1rem * 1.2 * 1.2);
}

.calculator__keys {
  background: var(--grey-200);
  display: grid;
  grid-gap: 2px;
  grid-template-columns: repeat(4, auto);
  grid-template-areas:
    ". . . ."
    "seven eight nine equal"
    "four five six equal"
    "one two three equal"
    "zero decimal clear equal";
}

.calculator__keys > button {
  border: 0;
}

[data-key="1"] {
  grid-area: one;
}

[data-key="2"] {
  grid-area: two;
}

[data-key="3"] {
  grid-area: three;
}

[data-key="4"] {
  grid-area: four;
}

[data-key="5"] {
  grid-area: five;
}

[data-key="6"] {
  grid-area: six;
}

[data-key="7"] {
  grid-area: seven;
}

[data-key="8"] {
  grid-area: eight;
}

[data-key="9"] {
  grid-area: nine;
}

[data-key="0"] {
  grid-area: zero;
}
.decimal {
  grid-area: decimal;
}
.clear {
  grid-area: clear;
}

[data-key="equal"] {
  grid-area: equal;
  background-color: var(--orange-400);
}

[data-key="equal"]:active {
  background-color: var(--orange-500);
}

[data-type="operator"] {
  background: var(--grey-100);
}

[data-type="number"],
[data-type="clear"] {
  background: #fff;
}

[data-type="operator"]:active,
[data-type="number"]:active,
[data-type="clear"]:active {
  background: var(--grey-200);
}

[data-state="selected"] {
  background: var(--grey-200);
}