/* Cross-browser interface icons built without Unicode glyphs or icon fonts. */

.ui-icon {
    position: relative;
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    min-width: 1.15em;
    flex: 0 0 1.15em;
    color: currentColor;
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.16em;
}

.ui-icon::before,
.ui-icon::after {
    position: absolute;
    display: block;
    box-sizing: border-box;
    content: '';
    pointer-events: none;
}

.ui-icon--arrow-up-right::before {
    top: 0.16em;
    right: 0.15em;
    width: 0.62em;
    height: 0.62em;
    border-top: 0.115em solid currentColor;
    border-right: 0.115em solid currentColor;
}

.ui-icon--arrow-up-right::after {
    top: 0.54em;
    left: 0.13em;
    width: 0.9em;
    height: 0.115em;
    background: currentColor;
    border-radius: 99px;
    transform: rotate(-45deg);
    transform-origin: center;
}

.ui-icon--arrow-left::before {
    top: 0.24em;
    left: 0.12em;
    width: 0.62em;
    height: 0.62em;
    border-bottom: 0.115em solid currentColor;
    border-left: 0.115em solid currentColor;
    transform: rotate(45deg);
}

.ui-icon--arrow-left::after {
    top: 0.52em;
    left: 0.16em;
    width: 0.88em;
    height: 0.115em;
    background: currentColor;
    border-radius: 99px;
}

.ui-icon--arrow-right::before {
    top: 0.24em;
    right: 0.12em;
    width: 0.62em;
    height: 0.62em;
    border-top: 0.115em solid currentColor;
    border-right: 0.115em solid currentColor;
    transform: rotate(45deg);
}

.ui-icon--arrow-right::after {
    top: 0.52em;
    right: 0.16em;
    width: 0.88em;
    height: 0.115em;
    background: currentColor;
    border-radius: 99px;
}

.ui-icon--close::before,
.ui-icon--close::after {
    top: 50%;
    left: 50%;
    width: 0.88em;
    height: 0.105em;
    background: currentColor;
    border-radius: 99px;
    transform-origin: center;
}

.ui-icon--close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ui-icon--close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
}

.cookie-modal__close .ui-icon,
.ti-lightbox button .ui-icon {
    width: 1em;
    height: 1em;
    min-width: 1em;
    flex-basis: 1em;
    font-size: 1.15rem;
    vertical-align: 0;
}

.project-tile__image > .ui-icon {
    position: absolute;
}

@media (forced-colors: active) {
    .ui-icon--arrow-up-right::after,
    .ui-icon--arrow-left::after,
    .ui-icon--arrow-right::after,
    .ui-icon--close::before,
    .ui-icon--close::after {
        background: CanvasText;
    }

    .ui-icon--arrow-up-right::before,
    .ui-icon--arrow-left::before,
    .ui-icon--arrow-right::before {
        border-color: CanvasText;
    }
}