@import '../../common/style/press/var.scss';

.press-number-keyboard {
  background-color: var(--keyboard-background-color, $keyboard-background-color);

  &--safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  &__toolbar {
    display: flex;
    position: relative;
    justify-content: space-between;
    height: var(--keyboard-toolbar-height, $keyboard-toolbar-height);
    margin-bottom: var(--keyboard-toolbar-margin-bottom, $keyboard-toolbar-margin-bottom);
    line-height: var(--keyboard-toolbar-height, $keyboard-toolbar-height);
  }

  &__cancel,
  &__confirm {
    flex: none;
    position: absolute;
    padding: var(--keyboard-action-padding, $keyboard-action-padding);
    font-size: var(--keyboard-action-font-size, $keyboard-action-font-size);
    line-height: var(--keyboard-toolbar-height, $keyboard-toolbar-height);
    background-color: var(--keyboard-background-color, $keyboard-background-color);
    border: 0;

    &::after {
      border: 0;
    }

    &--hover,
    &:active {
      opacity: $active-opacity;
    }
  }

  &__confirm {
    right: 0;
    color: var(--keyboard-confirm-action-color, $keyboard-confirm-action-color);
  }

  &__cancel {
    left: 0;
    color: var(--keyboard-cancel-action-color, $keyboard-cancel-action-color);
  }

  &__title {
    flex: initial;
    margin: auto;
    text-align: center;
    font-size: var(--keyboard-title-font-size, $keyboard-title-font-size);
    line-height: var(--keyboard-toolbar-height, $keyboard-toolbar-height);
    color: var(--keyboard-title-color, $keyboard-title-color);
    text-wrap: nowrap;
  }

  &__pad {
    display: grid;
    place-content: stretch;
    place-items: stretch;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-auto-flow: dense;
    grid-auto-rows: var(--keyboard-button-height, $keyboard-button-height);
    gap: var(--keyboard-button-gap, $keyboard-button-gap);
    padding: var(--keyboard-padding, $keyboard-padding);

    &--accounting {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  &__button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-size: var(--keyboard-button-font-size, $keyboard-button-font-size);
    line-height: var(--keyboard-button-font-size, $keyboard-button-font-size);
    background-color: var(--keyboard-button-background-color, $keyboard-button-background-color);
    border: 0;

    /* #ifdef MP-TOUTIAO */
    overflow: auto;

    /* #endif */

    &::after {
      border: 0;
    }

    &--hover,
    &:active {
      background-color: var(--keyboard-button-active-color, $keyboard-button-active-color);
    }

    &--wide {
      grid-column: span 2 / span 2;
    }

    &--confirm {
      color: $white;
      background-color: $blue;
      border: 0;

      &-hover,
      &:active {
        opacity: $active-opacity;
      }
    }

    &--place-right {
      order: -1;
      grid-column: -2 / -1;
      grid-row: span 2 / span 2;
    }
  }

  &__delete-icon {
    height: var(--keyboard-button-font-size, $keyboard-button-font-size);
  }
}