/**
 * 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-image: linear-gradient(236deg, #7fa77f, #697b8d);
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/*******************
   Calculator
   *******************/

.calculator {
    box-shadow: 0 0 25px rgb(51, 49, 49);
    border-radius: 0.5rem;
    overflow: hidden;
}

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

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

.calculator__keys>button {
    border: 0;
}

.one {
    grid-area: one;
}

.two {
    grid-area: two;
}

.three {
    grid-area: three;
}

.four {
    grid-area: four;
}

.five {
    grid-area: five;
}

.six {
    grid-area: six;
}

.seven {
    grid-area: seven;
}

.eight {
    grid-area: eight;
}

.nine {
    grid-area: nine;
}

.zero {
    grid-area: _zero;
}

.decimal {
    grid-area: _decimal;
}

.clear {
    grid-area: clear;
}

.equal {
    grid-area: equal;
    background-color: var(--orange-500);
    color: #fff;
}

.equal:active {
    grid-area: equal;
    background-color: var(--orange-600);
    color: #fff;
}

[data-type="operator"] {
    background: var(--grey-800);
    color: #fff;
}

[data-type="operator"]:active {
    background: var(--grey-600);
    color: #fff;
}

[data-type="number"],
[data-type="clear"] {
    background: var(--grey-600);
    color: #fff;
}

[data-type="number"]:active,
[data-type="clear"]:active {
    background: var(--grey-700);
    color: #fff;
}

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