@import url(https://fonts.googleapis.com/css?family=Roboto:100);

html,
body {
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
}
*,
*::after,
*::before {
  box-sizing: inherit;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Roboto, sans-serif;
  background: linear-gradient(#8b9da9, #cecbc5);
}

.calculator {
  max-width: 320px;
  box-shadow: 0 0 75px 30px rgba(205, 205, 205, 0.7);
  &:focus {
    outline: 1px solid rgba(86, 108, 204, 0.7);
  }
}

.calculator__display {
  padding: 4px 10px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  font-size: 4rem;
  transition: font-size 100ms ease-out;
  min-height: 5rem;
  display: grid;
  align-items: center;
  justify-items: end;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none; /* Chromium/Safari */
  }
}

.calculator__functions {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, 0.4);
  mix-blend-mode: overlay;
  button {
    cursor: pointer;
    flex: 0 1 25%;
    height: 70px;
    color: #111;
    font-size: 2em;
    mix-blend-mode: overlay;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    &.btn--large {
      flex: 0 1 50%;
    }
    &.btn--opaque {
      background: rgba(255, 255, 255, 0.2);
      & img {
        pointer-events: none;
      }
    }
    &.btn--opaque:hover:not(.focus, :active) {
      background: rgba(255, 255, 255, 0.1);
    }
    &.focus {
      background: rgb(241, 241, 98, 0.7);
    }
    &:is(:active, .is-active) {
      background: rgba(255, 255, 255, 0.3);
    }
    &:is([value="="]:active, [value="="].is-active) {
      background: rgba(60, 86, 198, 0.7);
    }
    &:is(
        [value="clear"]:active,
        [value="clear"].is-active,
        [value="backspace"]:active,
        [value="backspace"].is-active
      ) {
      background: rgba(182, 24, 24, 0.7);
    }
  }
}
.preview {
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 4px 10px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none; /* Chromium/Safari */
  }
}
.hidden {
  display: none;
}