@use 'mixins/mixins' as *;

@include b(grid-input) {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;

  @include e(item) {
    width: 32px;
    height: 32px;
    border: 1px dashed #dcdfe6;

    border-radius: 4px;
    outline: none;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    outline: none;

    &:not(:last-child) {
      margin-right: 8px;
    }
  }

  @keyframes fade {
    0% {
      opacity: 0.2;
    }

    100% {
      opacity: 1;
    }
  }

  @include m(focus) {
    border-color: var(--el-color-primary);
    border-style: solid;
    color:  var(--el-color-primary);

    .el-grid-input__text {
      color: var(--el-color-primary);
      animation: fade 1s linear infinite alternate;
    }

    .el-grid-input__cursor {
      position: absolute;
      width: 2px;
      height: 16px;
      background: var(--el-color-primary);
      content: '';
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: fade 1s linear infinite alternate;
    }
  }

  @include m(small) {
    .el-grid-input__item {
      width: 24px;
      height: 24px;
    }
  }

  @include m(large) {
    .el-grid-input__item {
      width: 40px;
      height: 40px;
    }
  }
}