.xh-pinpad {
  width: 100%;
  height: 100%;

  &__header {
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    h1 {
      font-size: 24px;
      height: 24px;
    }

    p {
      font-size: var(--xh-font-size-large-px);
      height: var(--xh-font-size-large-px);
    }
  }

  &__display {
    margin: 0 var(--xh-pad-px);
    flex-direction: row;

    &__digit {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 65px;
      background-color: var(--xh-bg-alt);
      border: var(--xh-border-solid);
      border-radius: 5px;
      font-size: 35px;
      margin: var(--xh-pad-px);
      text-align: center;

      &.disabled {
        color: var(--xh-text-color-muted);
      }

      &.active {
        border-color: var(--xh-accent-color);
        background-color: var(--xh-bg-highlight);
      }
    }
  }

  &__error {
    flex: 1;
    margin: 0 var(--xh-pad-px);
    color: var(--xh-red);
    text-align: center;
    font-size: var(--xh-font-size-px);
  }

  &__keyboard {
    flex: 3;

    &__row {
      flex: 1;
    }

    &__key {
      flex: 1;

      &.xh-button {
        font-size: var(--xh-font-size-large-em);
        height: 100%;
        margin: 0;
        padding: 0;
        border: 1px solid var(--xh-bg-alt);
        border-radius: 0;
      }
    }
  }
}

@media (orientation: landscape) {
  .xh-pinpad {
    background: var(--xh-bg-alt);

    &__frame {
      margin: 0 auto;
      padding: 0 var(--xh-pad-double-px);
      max-width: 90vh;
      background: var(--xh-bg);
      border-left: var(--xh-border-solid);
      border-right: var(--xh-border-solid);
    }

    &__header {
      h1 {
        font-size: var(--xh-font-size-large-px);
        height: var(--xh-font-size-large-px);
      }

      p {
        font-size: var(--xh-font-size-px);
        height: var(--xh-font-size-px);
      }
    }

    &__display {
      justify-content: center;

      &__digit {
        font-size: var(--xh-font-size-large-px);
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
      }
    }

    &__error {
      font-size: var(--xh-font-size-small-px);
    }
  }
}