@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(seckbd) {
  --seckbd-br: var(--xzx-br-base);
  --seckbd-item-padding: 8px;
  --seckbd-item-w: 100%;
  --seckbd-item-h: 30px;
  --seckbd-item-bg: var(--xzx-white-1);

  @include e(content) {
    width: 100%;

    @include when(kbd-number) {
      .is-hdl {
        width: 100%;
      }
    }
  }

  @include e('row') {
    display: flex;
    justify-content: center;
    column-gap: 4px;
    margin-bottom: 8px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  @include e('header') {
    margin-bottom: 8px;
  }

  @include e('item__inner') {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--seckbd-item-bg);
    padding: var(--seckbd-item-padding);
    border-radius: var(--seckbd-br);
  }

  @include e(item) {
    width: var(--seckbd-item-w);
    height: var(--seckbd-item-h);
    user-select: none;
    -webkit-user-select: none;

    img {
      pointer-events: none;
      height: 100%;
      max-width: unset;
    }

    @include when(hdl) {
      width: 250%;

      flex-shrink: 1;

      &.hdl-space {
        width: 460%;
      }

      &.hdl-enter {
        width: 300%;
      }
    }
  }
}