@import "import";

.bullet {
  position: relative;
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
  padding: 6px;
  pointer-events: none;
  //outline: 1px rgba(255, 0, 0, 0.2) solid;
  @include flex();

  &:before {
    content: "";
    --radius: 9px;
    display: inline-block;
    width: var(--radius);
    height: var(--radius);
    border-radius: var(--radius);
    background-color: color(white);
    opacity: 0.5;
    will-change: opacity, width, transform;
    transition:
      width 0.3s cubic-bezier(0.84, 0, 0.16, 1),
      transform 0.3s ease-out;
  }

  &.selected {
    &:before {
      will-change: width, opacity;
      width: 40px;
      opacity: 1;
    }
  }

  &.active {
    pointer-events: auto;

    &:focus-visible {
      outline: none;
      border: none;
    }

    &:not(.selected):hover,
    &:not(.selected):focus-visible {
      &:before {
        opacity: 1;
        transform: scale(1.5);
        cursor: pointer;
      }
    }
  }

  &.disabled {
    pointer-events: none;
  }
}