/* ==========================================================================
   InfoBar
   ========================================================================== */

/* Base ---------------------------------------------------------------------*/
.rd-infobar {
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 20px auto;
    gap: var(--rd-spacing-md);
    align-items: center;
    margin-bottom: var(--rd-spacing-sm);
    padding: var(--rd-spacing-x-sm) var(--rd-spacing-md);
    border-radius: var(--rd-borderradius-border-md);
    background-color: var(--rd-success-inactive);
    color: var(--rd-success-pressed);
    font-size: var(--rd-fontsize-3);
    font-weight: var(--rd-fontweights-open-sans-1);
    line-height: var(--rd-lineheights-0);
    text-align: left !important;
}

/* Default icon color (overridden per color variant below) */
.rd-infobar:before {
    background-color: var(--rd-success-pressed);
}

.rd-infobar b {
    margin-bottom: var(--rd-spacing-md);
    line-height: 150%;
}

/* Color variants -----------------------------------------------------------*/
/* green (= base default) */
.rd-infobar-green {
    background-color: var(--rd-success-inactive);
    color: var(--rd-success-pressed);
}

.rd-infobar-green .rd-infobar-link {
    color: var(--rd-success-pressed);
}

/* blue */
.rd-infobar-blue {
    background-color: var(--rd-secondary-inactive);
    color: var(--rd-secondary-active);
}

.rd-infobar-blue:before {
    background-color: var(--rd-secondary-hover) !important;
}

/* gray */
.rd-infobar-gray {
    background-color: var(--rd-input-default);
    color: var(--rd-input-hover);
}

.rd-infobar-gray:before {
    background-color: var(--rd-input-hover) !important;
}

/* red */
.rd-infobar-red {
    background-color: var(--rd-primary-active);
    color: var(--rd-font-light);
}

.rd-infobar-red.rd-icon-info-circle::before {
    background-color: var(--rd-font-light) !important;
}

/* yellow */
.rd-infobar-yellow {
    background-color: var(--rd-warning-inactive);
    color: var(--rd-warning-pressed);
}

.rd-infobar-yellow:before {
    background-color: var(--rd-warning-pressed) !important;
}

.rd-infobar-yellow .rd-infobar-link {
    color: var(--rd-warning-pressed);
}

/* Content & links ----------------------------------------------------------*/
.rd-infobar-content a {
    display: inline-block;
}

.rd-infobar-content span {
    font-weight: var(--rd-fontweights-open-sans-0);
}

.rd-infobar-content .rd-infobar-link {
    cursor: pointer;
}

.rd-infobar-content span.clickableText {
    cursor: pointer;
}

.rd-infobar-link {
    text-decoration: underline;
    font-weight: 400;
    font-size: var(--rd-fontsize-3) !important;
}

/* action-bold-right modifier */
.action-bold-right .rd-infobar-content {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.action-bold-right .rd-infobar-link {
    float: right;
    font-weight: var(--rd-fontweights-open-sans-0);
}

/* Icons --------------------------------------------------------------------*/
.rd-icon-heart::before {
    align-self: self-start !important;
}

.rd-infobar-link.rd-arrow-right {
    display: flex;
    gap: 16px;
    align-items: center;
}

.rd-infobar-link.rd-arrow-right:after {
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--rd-warning-pressed);
    mask-image: url("/src/img/2023/svg/icons/rd-icon-arrowLineRightBtn.svg");
    -webkit-mask-image: url("/src/img/2023/svg/icons/rd-icon-arrowLineRightBtn.svg");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: 50%;
    -webkit-mask-position: 50%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Closeable ----------------------------------------------------------------*/
.rd-infobar:has(.rd-infobar-close) {
    grid-template-areas:
        "ICON TEXT CLOSE";
    grid-auto-columns: 50px auto 20px;
}

.rd-infobar:has(.rd-infobar-close) .rd-infobar-close {
    position: relative;
    cursor: pointer;
    text-align: right;
}

.rd-infobar:has(.rd-infobar-close) .rd-infobar-close:after {
    position: relative;
    cursor: pointer;
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: var(--rd-success-pressed);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: 50%;
    -webkit-mask-position: 50%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("/src/img/2023/svg/icons/rd-icon-close.svg");
    -webkit-mask-image: url("/src/img/2023/svg/icons/rd-icon-close.svg");
}

/* Close icon inherits the variant's text color where it differs from green */
.rd-infobar-blue:has(.rd-infobar-close) .rd-infobar-close:after {
    background-color: var(--rd-secondary-hover);
}

.rd-infobar-gray:has(.rd-infobar-close) .rd-infobar-close:after {
    background-color: var(--rd-input-hover);
}

.rd-infobar-red:has(.rd-infobar-close) .rd-infobar-close:after {
    background-color: var(--rd-font-light);
}

.rd-infobar-yellow:has(.rd-infobar-close) .rd-infobar-close:after {
    background-color: var(--rd-warning-pressed);
}