.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: var(--badge-fill-color, transparent);
  border-radius: var(--op-radius-medium);

  text-decoration: none;
  transition: 0.2s;

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

  &.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--medium {
    width: var(--op-space-4x-large);
    height: var(--op-space-4x-large);
    font-size: var(--op-font-2x-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-on-plus-six);

    &: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-4x-large);
    height: var(--op-space-4x-large);
    box-shadow: var(--button-shadow-default);

    &:hover {
      cursor: pointer;

      .badge__icon {
        opacity: 0;
      }

      .badge__action {
        opacity: 1;
      }
    }
  }

  .badge__icon,
  .badge__action {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    transition: opacity 0.15s ease;
  }

  .badge__action {
    opacity: 0;
  }

  &.badge--deletable .badge__action {
    color: var(--op-color-alerts-danger-base);
  }

  &.badge--addable .badge__action {
    color: var(--op-color-neutral-minus-five);
  }

  &.badge--new, &.badge--addable {
    .badge__icon {
      opacity: 0.5;
    }
  }

  .icon, svg {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
}

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

.badges-addable-container {
  padding-block-start: var(--op-space-x-small);
  height: auto;
  display: flex;
  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-x-small);
  display: flex;
  align-items: center;
  /* --op-breakpoint-small */
  @media only screen and (max-width: 768px) {
    padding-left: var(--op-space-x-small);
  }

  .context-menu { z-index: calc(var(--z-index-popup) + 1); }
}