.action-bar {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.action-bar .action-bar__button {
    flex: 1;
}

.action-bar--listing-detail .action-bar__button.action-bar__button--contact-request,
.action-bar--listing-detail .action-bar__button.action-bar__button--open-conversation,
.action-bar--listing-detail .action-bar__button.action-bar__button--reacted {
    flex: 3;
}

.action-bar--listing-detail .action-bar__button.action-bar__button--contact-request:before,
.action-bar--listing-detail .action-bar__button.action-bar__button--reacted:before,
.action-bar--listing-detail .action-bar__button.action-bar__button--phone:before {
    content: '';
    margin-right: .5rem;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.action-bar--listing-detail .action-bar__button.action-bar__button--reacted:before {
    background-image: url("/frontend/assets/Shared/Component/ActionBar/Presentation/Images/ReactedChatBubble-664430d852.svg");
}

.action-bar--listing-detail .action-bar__button.action-bar__button--phone {
    flex: 1;
}

.action-bar--listing-detail .action-bar__button.action-bar__button--phone:before {
    background-image: url("/frontend/assets/Shared/Component/ActionBar/Presentation/Images/Phone-3ad1b3c149.svg");
}

.action-bar--listing-detail .action-bar__button.action-bar__button--contact-request:before {
    background: url("/frontend/assets/Huurwoningen/Component/ActionBar/Presentation/Images/ContactRequest-60d5946b73.svg") no-repeat center;
}

.action-bar--listing-detail .action-bar__favorite-toggle {
    flex: 0 0 3rem;
}

.action-bar--listing-detail .action-bar__favorite-toggle.action-bar__favorite-toggle--hidden {
    display: none;
}

.action-bar--listing-detail .action-bar__button.action-bar__button--hidden {
    display: none;
}