.bc-select-item-default {
  position: relative;
  box-sizing: border-box;
  display: flex;
  background: var(--color-bg-component, #ffffff);
  border: 1px solid var(--color-border, #d9d9d9);
  // padding: 4px 12px;
  border-radius: var(--size-border-radius, 2px);
  overflow: hidden;
  cursor: pointer;
  transition: 0.4s;

  &:not(.bc-select-item-disabled):hover {
    box-shadow: 0 0 4px 2px var(--color-shadow, rgba(0, 0, 0, 0.1));

    .bc-select-item-cover {
      transform: scale(1.05);
    }

    // &::before,
    // &::after {
    //   opacity: 0;
    // }
  }

  &.bc-select-item-active {
    border-color: var(--color-primary, #3b82f6);

    &::before {
      content: '';
      position: absolute;
      z-index: 9;
      // right: 12px;
      // bottom: 12px;
      // width: 18px;
      // height: 18px;
      // background: var(--color-primary, #3b82f6);
      // border-radius: 18px;
      right: 0;
      bottom: 0;
      border: 16px solid var(--color-primary, #3b82f6);
      border-left-color: transparent;
      border-top-color: transparent;
    }

    &::after {
      content: '';
      position: absolute;
      z-index: 9;
      box-shadow: -2px 2px 0 0 #fff;
      transform: rotate(-45deg);
      // right: 16px;
      // bottom: 22px;
      // width: 10px;
      // height: 6px;
      right: 4px;
      bottom: 10px;
      width: 14px;
      height: 7px;
    }
  }

  &.bc-select-item-disabled {
    background: var(--color-bg-component-disabled, rgba(0, 0, 0, 0.04));
    cursor: not-allowed;

    .bc-select-item-info {
      background: var(--color-bg-component-disabled, rgba(0, 0, 0, 0.04));
    }

    &.bc-select-item-active {
      border-color: var(--color-border-disabled, #d1d1d1);

      &::before {
        border-right-color: var(--color-border-disabled, #d1d1d1);
        border-bottom-color: var(--color-border-disabled, #d1d1d1);
      }
    }
  }

  &.bc-select-item-horizontal {
    flex-direction: row;

    .bc-select-item-cover {
      max-height: 200px;
      border-radius: var(--size-border-radius, 2px) 0 0 var(--size-border-radius, 2px);
    }

    .bc-select-item-info {
      flex: 1;
    }
  }

  &.bc-select-item-vertical {
    flex-direction: column;

    .bc-select-item-cover {
      max-width: 200px;
      border-radius: var(--size-border-radius, 2px) var(--size-border-radius, 2px) 0 0;
    }

    .bc-select-item-info {
      flex: 1;
    }
  }

  .bc-select-item-info {
    box-sizing: border-box;
    padding: 12px;
  }

  .bc-select-item-cover {
    // max-width: 160px;
    // max-height: 160px;
    transition: 0.4s;
  }

  .bc-select-item-label {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text, #393939);
  }

  .bc-select-item-desc {
    margin-top: var(--size-cell-gap, 16px);
    color: var(--color-text-desc, #a9a9a9);
  }
}