.btn-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: fit-content !important;
    padding: 6px 6px 6px 24px;
    border-radius: 40px !important;
    gap: var(--spacing-xs) !important;

    text-decoration: none !important;

    border: none !important; /* important for button */
}

.btn-bar__text {
    font-size: 1rem;
    font-weight: 700;
    }

/* icon circle */
.btn-bar__icon {
    width: 39px !important;
    height: 39px !important;

    border-radius: 50% !important;

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

    background: var(--color-yellow) !important;
    color:black !important;
    margin-left: 0.5rem !important;
}

.wpg-vacancy:hover .btn-bar__icon,
.btn-bar--red:hover .btn-bar__icon,
.btn-bar--white:hover .btn-bar__icon,
.btn-bar--clear:hover .btn-bar__icon  {
     background: var(--color-red) !important;
     color: white !important;
}

.btn-bar--red {
    background: var(--color-red) !important;
    color: white !important;
}

.btn-bar--red:hover {
    background: var(--color-yellow) !important;
    color: black !important;
}

.btn-bar--white {
    background: white;
    color: var(--color-red); 
}

.btn-bar--white:hover {
    color: black ;
}

.btn-bar--clear {
    background: transparent;
    width: 100% !important;
    padding-left: 6px !important;
    color: var(--color-red);
}

.btn-bar--clear:hover,
.wpg-vacancy:hover .btn-bar--clear {
    color: black;
}

.btn-bar__icon {
  display: inline-block;
  overflow: hidden;
  height: 28px;
}

.btn-bar__icon svg {
  display: block;
}

/* =========================
   HOVER IN (top out → bottom in)
========================= */
.wpg-vacancy:hover  .btn-bar--clear .btn-bar__icon svg,
.btn-bar--red:hover .btn-bar__icon svg,
.btn-bar--white:hover .btn-bar__icon svg,
.btn-bar--clear:hover .btn-bar__icon svg {
  animation: outTopInBottom 0.30s ease-in-out forwards;
}

/* =========================
   HOVER OUT (bottom out → top in)
========================= */
.wpg-vacancy:not(:hover)  .btn-bar--clear .btn-bar__icon svg,
.btn-bar--red:not(:hover) .btn-bar__icon svg,
.btn-bar--white:not(:hover) .btn-bar__icon svg,
.btn-bar--clear:not(:hover) .btn-bar__icon svg {
  animation: outBottomInTop 0.30s ease-in-out forwards;
}

/* =========================
   KEYFRAMES
========================= */
@keyframes outTopInBottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(-120%);
    opacity: 0;
  }

  51% {
    transform: translateY(120%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes outBottomInTop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(120%);
    opacity: 0;
  }

  51% {
    transform: translateY(-120%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}