style.scss

@use "_palette";

.case {
  background-color: palette.$case;
  width: 400px;
  height: 800px;
  padding: 1em;
  border-radius: 30px;
  &__screen {
    border-radius: 30px;
    margin: 10px;
    padding: 20px;
    height: 30%;
    background-color: palette.$screen-color;
    margin-bottom: 1em;
    font-size: 2em;

    &--arg {
      padding: 0;
      margin: 0;
      vertical-align: bottom;
      width: 340px;
      word-wrap: break-word;
    }

    &--result {
      font-weight: bold;
      font-size: 2.5em;
      overflow: hidden;
      overflow-wrap: break-word;
      word-wrap: break-word;

      &-smaller {
        font-size: 1.1em;
      }
    }
  }

  &__btns {
    justify-content: end;
    margin: 10px;
    grid-gap: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

.btn {
  font-size: 2em;
  border-radius: 20px;
  margin: 2px;
  height: 80px;
  color: #e4e3f2;

  &--number {
    background-color: palette.$num;
  }
  &--operator {
    background-color: palette.$operator;
  }
  &--top {
    background-color: palette.$top;
  }
  &--equals {
    background-color: darkgray;
  }
}

#btn--0 {
  grid-column-end: span 2;
}