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

$Component: '.at-car-number-view';

#{$Component} {
  box-sizing: border-box;

  &_body {
    box-sizing: border-box;
    padding: $spacing-v-lg 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .word-input {
    border-radius: 10px;
    background: $color-grey-4;
    height: 0;
    margin: 0 $spacing-h-xs;
    box-sizing: border-box;
    padding-bottom: calc((100% - 70px) / 7);
    width: calc((100% - 70px) / 7);
    position: relative;

    &.active {
      background: $color-brand-light;
    }

    &-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      font-weight: 500;
      font-size: 32px;
    }

    &:last-child {
      background: #eefbe7;
    }

    .new-energy-input {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      width: 100%;

      &-icon {
        color: #6cc369;
        font-size: $font-size-sm;
      }

      &-text {
        font-size: 16px;
      }
    }
  }

  &_foot {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: $color-grey-4;
    padding: 0 $spacing-h-lg;
  }

  &_keyboard {
    padding-bottom: $spacing-h-lg;
    transition: all 0.3s;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .word-key {
    background: $color-white;
    border-radius: 10px;
    box-shadow: 0 0 8px 0 $color-grey-3;
    width: 80px;
    height: 80px;
    margin: $spacing-v-xs 0;
    font-size: $font-size-slg;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    &:active {
      background: $color-brand;
      color: $color-white;
    }

    &.fill-block {
      visibility: hidden;
    }
  }

  .btn-bar {
    display: flex;
    justify-content: flex-end;
    line-height: 80px;

    .btn-submit {
      color: $color-brand;
      font-size: $font-size-base;
    }
  }
}