@import '../../scss/variables.scss';
@import '../../scss/mixins.scss';

// #variables
$s-number-keyboard-bg: $s-gray-300 !default;

$s-number-keyboard-header-height: 44px !default;
$s-number-keyboard-title-font-size: 16px !default;

$s-number-keyboard-hide-font-size: 20px !default;

$s-number-keyboard-body-padding-x: 5px !default;
$s-number-keyboard-body-padding-y: 5px !default;

$s-number-keyboard-key-gap: 5px !default;
$s-number-keyboard-key-height: 48px !default;
$s-number-keyboard-key-border-radius: $s-border-radius-sm !default;
$s-number-keyboard-key-font-size: $s-font-size-xl !default;
$s-number-keyboard-key-bg: $s-white !default;
$s-number-keyboard-key-active-bg: $s-bg-active !default;
// #endvariables

.s-number-keyboard {
  background-color: $s-number-keyboard-bg;

  @at-root {
    .s-number-keyboard-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: $s-number-keyboard-header-height;

      @at-root {
        .s-number-keyboard-title {
          flex: 1 1 0;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
          font-size: $s-number-keyboard-title-font-size;
          @include ellipsis;
        }

        .s-number-keyboard-button {
          height: 100%;
        }
        .s-number-keyboard-cancel {
          margin-right: auto;

          @at-root {
            .s-number-keyboard-hide {
              font-size: $s-number-keyboard-hide-font-size;
            }
          }
        }
        .s-number-keyboard-confirm {
          margin-left: auto;
        }
      }
    }

    .s-number-keyboard-body {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: $s-number-keyboard-key-gap;
      padding: $s-number-keyboard-body-padding-y
        $s-number-keyboard-body-padding-x;

      @at-root {
        .s-number-keyboard-key {
          display: flex;
          align-items: center;
          justify-content: center;
          height: $s-number-keyboard-key-height;
          border-radius: $s-number-keyboard-key-border-radius;
          font-size: $s-number-keyboard-key-font-size;
          background-color: $s-number-keyboard-key-bg;
          user-select: none;
          cursor: pointer;
          box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.3);

          &:active {
            background-color: $s-number-keyboard-key-active-bg;
          }
        }
      }
    }
  }
}

.s-number-keyboard-key-lastnum {
  grid-area: 4 / 1 / 5 / 3;

  .s-number-keyboard-has-extra & {
    grid-area: 4 / 2 / 5 / 3;
  }
}