@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.badge {
  position: relative;
  width: var(--op-space-4x-large);
  height: var(--op-space-4x-large);

  display: flex;
  justify-content: center;
  align-items: center;

  padding: var(--op-space-x-small);

  color: var(--badge-color);
  background-color: transparent;
  border-radius: 50%;

  text-decoration: none;
  transition: 0.2s;
  pointer-events: all;

  font-size: var(--op-font-2x-large);

  .ti {
    font-weight: bold;
  }

  .badge__border {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-radius: 50%;
    border: solid 1.5px var(--badge-color);
  }

  &.badge--x-small {
    width: var(--op-space-2x-large);
    height: var(--op-space-2x-large);
    font-size: var(--op-font-large);
  }

  &.badge--small {
    width: var(--op-space-3x-large);
    height: var(--op-space-3x-large);
    font-size: var(--op-font-x-large);
  }

  &.badge--large {
    width: calc(var(--op-space-4x-large) + var(--op-space-small));
    height: calc(var(--op-space-4x-large) + var(--op-space-small));
    font-size: var(--op-font-4x-large);
    border-width: 2px;
  }

  &.badge--new {
    color: var(--op-color-neutral-base);

    &:hover {
      background-color: var(--op-color-neutral-plus-five);
      cursor: pointer;
    }
  }

  &.badge--clickable {
    &:hover {
      background-color: var(--badge-color);
      opacity: 0.5;
      color: var(--op-color-white);
      cursor: pointer;
    }
  }

  &.badge--deletable, &.badge--addable {
    width: var(--op-space-x-large);
    height: var(--op-space-x-large);

    &:hover {
      cursor: pointer;

      i.ti {
        visibility: visible;
      }
    }
  }

  i.ti {
    visibility: hidden;
    position: absolute;
    font-size: var(--op-font-small);
    padding: var(--op-space-3x-small);
    border-radius: 50%;
    top: -5px;
    right: -8px;
    background-color: var(--op-color-alerts-danger-plus-seven);
    color: var(--op-color-alerts-danger-on-plus-seven);
  }

  &.badge--addable {
    i.ti {
      background-color: var(--op-color-alerts-notice-plus-seven);
      color: var(--op-color-alerts-notice-on-plus-seven);
    }
  }

  &.badge--new, &.badge--addable {
    :not(.badge__tooltip) {
      opacity: 0.5;
    }

    .badge__border {
      opacity: 0.5;
      border-style: dashed;

      animation-name: rotateAnimation;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
  }
}

a:has(.badge), button:has(.badge) {
  pointer-events: none;
  cursor: pointer;
}

.badges-addable-container {
  padding: var(--op-space-x-small) 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--op-space-x-small);
  transition: width 250ms ease-in-out;

  @media (width < 768px) {
    overflow: hidden;
    width: 0;

    &.show-on-mobile {
      width: 4rem;
      overflow: unset;
    }
  }
}

.badges__gutter {
  gap: var(--op-space-3x-small);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* --op-breakpoint-small */
  @media only screen and (max-width: 768px) {
    padding-left: var(--op-space-x-small);
  }
}

.badge__tooltip {
  position: absolute;
  z-index: 1;
  width: var(--op-space-2x-large);
  height: var(--op-space-2x-large);
}