.icon-row .wrapper {
    display: flex;
    align-items: center;
    gap: .5em;
}

.icon-row .icon {
    width: 1.5em;
    height: 1.5em;
}

.icon-row .icon path {
    fill: var(--color-1);
    transition-duration: var(--transition-duration);
}

.icon-row:hover a .icon path {
    fill: var(--link-color-hover);
}

.icon-row a .text {
    color: var(--text-color);
    transition-duration: var(--transition-duration);
}

.icon-row:hover a .text {
    color: var(--link-color-hover);
}

.icon-strip {
    position: relative;
}

.icon-strip a[href^="mailto:"]::after {
    content: "Kopiera e-post";
    position: absolute;
    left: 6px;
    top: 120%;
    z-index: 2;
    padding: 3px 6px;
    border-radius: 2px;
    background: var(--color-1);
    font-size: 10px;
    font-weight: var(--font-weight-semi-bold);
    color: var(--white);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--transition-duration) ease,
              transform var(--transition-duration) ease;
}

@media (hover: none) and (pointer: coarse) {
    .icon-strip a[href^="mailto:"]:hover::after {
        display: none;
    }
}

.icon-strip a[href^="mailto:"]:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.icon-strip {
    background: var(--white);
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-tiny);
    margin-top: 5px;
    transition-duration: var(--transition-duration);
    font-weight: var(--font-weight-semi-bold);
}

.icon-strip .wrapper {
    padding: 4px 8px;
}

.icon-strip svg {
    width: 1rem !important;
}

.icon-strip.ver-1 {
    background: var(--white);
}

.icon-strip.ver-2 {
    background: var(--color-3);
}

.icon-strip:hover {
    background: var(--light);
}

.icon-strip:hover .text {
    color: var(--black) !important;
}