.bc-feature {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  overflow: hidden;
  transition: 0.1s;

  & + & {
    margin-left: var(--size-cell-gap-sm, 8px);
  }

  &.bc-feature-status {
    &-default {
      // color: #78909c;
      color: var(--color-status-default, #78909c);
    }
    &-success {
      // color: #24b588;
      color: var(--color-status-success, #24b588);
    }
    &-warning {
      // color: #ff9800;
      color: var(--color-status-warning, #ff9800);
    }
    &-error {
      // color: #f44336;
      color: var(--color-status-error, #f44336);
    }
    &-info {
      // color: #03a9f4;
      color: var(--color-status-processing, #03a9f4);
    }
    &-other {
      // color: #ab47bc;
      color: var(--color-status-other, #ab47bc);
    }
  }

  &.bc-feature-mode {
    &-text {
      padding: 2px 4px;
    }

    &-badge {
      padding: 4px 8px 4px 22px;

      &::before,
      &::after {
        content: '';
        position: absolute;
        left: 8px;
        width: 6px;
        height: 6px;
        border-radius: 6px;
        box-sizing: border-box;
      }
      &::before {
        border: 1px solid currentColor;
      }
      &::after {
        background-color: currentColor;
      }
      &.bc-feature-animation {
        &::before {
          animation: scale-badge 0.6s linear infinite;
        }
        &::after {
          animation: scale-badge 0.6s linear 0.3s infinite;
        }
      }
    }

    &-tag {
      border-radius: 2px;
      background-color: currentColor;
      border: 1px solid currentColor;

      .bc-feature-text,
      svg {
        color: #fff;
      }
    }

    &-block {
      border-radius: 2px;
      border: 1px solid currentColor;
    }
  }

  // &.mode {
  //   &-text.bc-feature-animation > .bc-feature-text {
  //     background-image: linear-gradient(
  //       60deg,
  //       rgba(0, 0, 0, 0.2),
  //       currentColor
  //     );
  //     -webkit-text-fill-color: transparent;
  //     background-clip: text;
  //     background-size: 200% 100%;
  //     animation: text-color 2s linear infinite;
  //   }
  // }

  &.bc-feature-mode {
    &-tag.bc-feature-animation,
    &-block.bc-feature-animation {
      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        transform: translateX(-100%);
        animation: flash 3s ease-in infinite;
      }
    }
    &-tag.bc-feature-animation {
      &::before {
        background: linear-gradient(-60deg, transparent 80%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.2) 90%, transparent 90%);
      }

      &::after {
        background: linear-gradient(
          -60deg,
          transparent 55%,
          rgba(255, 255, 255, 0.3) 55%,
          rgba(255, 255, 255, 0.3) 75%,
          transparent 75%,
          transparent 80%,
          rgba(255, 255, 255, 0.2) 80%,
          rgba(255, 255, 255, 0.2) 90%,
          transparent 90%
        );
        animation-delay: 0.6s;
      }
    }
    &-block.bc-feature-animation {
      &::before {
        background: linear-gradient(-60deg, transparent 80%, currentColor 80%, currentColor 90%, transparent 90%);
        opacity: 0.2;
      }

      &::after {
        background: linear-gradient(
          -60deg,
          transparent 55%,
          currentColor 55%,
          currentColor 75%,
          transparent 75%,
          transparent 80%,
          currentColor 80%,
          currentColor 90%,
          transparent 90%
        );
        opacity: 0.3;
        animation-delay: 0.6s;
      }
    }
  }

  &.bc-feature-mode-tag,
  &.bc-feature-mode-block {
    &.bc-feature-round {
      border-radius: 16px;
    }

    &.bc-feature-size {
      &-small {
        padding: 3px 5px;

        .bc-feature-text {
          font-size: 12px;
          line-height: 12px;
        }
      }
      &-middle {
        padding: 4px 8px;

        .bc-feature-text {
          font-size: 14px;
          line-height: 14px;
        }
      }
      &-large {
        padding: 5px 10px;

        .bc-feature-text {
          font-size: 16px;
          line-height: 16px;
        }
      }
    }
  }

  &.bc-feature-hover-able:not(.disabled):hover {
    opacity: 0.75;
  }

  &.bc-feature-disabled {
    color: #b5b5b5;
    opacity: 0.8;
  }

  &.bc-feature-click-able {
    &:not(.disabled):active {
      transform: scale(0.96);
    }
  }

  .bc-feature-text {
    line-height: 16px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1;

    &.bc-feature-space {
      margin-left: 4px;
    }
  }
}

@keyframes text-color {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes scale-badge {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes flash {
  0% {
    transform: translateX(-100%);
  }
  30% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}