@layer components {
    .staldia-view-more-link {
        position: relative;
        display: grid;
        gap: .75rem;
        grid-template-columns: 1fr 30px;
        align-items: center;
        height: 50px;
        min-width: 180px;
        width: fit-content;
        padding: 0 10px 0 30px;
        background: var(--color-accent);
        border-radius: 99px;
        border: 1px solid var(--color-accent);
        color: var(--color-text-on-accent);
        transition: background .5s, color .5s;
    }
    .staldia-view-more-link:hover {
        background: var(--color-bg-white);
        color: var(--color-accent);
    }
    .staldia-view-more-link[data-en]:before {
        content: attr(data-en);
        font-size: var(--font-size-xs);
        color: var(--color-text-on-accent);
        transition: color .5s;
    }
    .staldia-view-more-link[data-en]:hover:before {
        color: var(--color-accent);
    }
    .staldia-view-more-icon {
        position: relative;
        width: 30px;
        height: 30px;
        background: var(--color-text-on-accent);
        border-radius: 50%;
        transition: background .5s;
    }
    .staldia-view-more-link:hover .staldia-view-more-icon {
        background: var(--color-accent);
    }
    .staldia-view-more-icon:before {
        content: "";
        position: absolute;
        width: .4rem;
        height: .4rem;
        top: 50%;
        left: 50%;
        --border: 2px solid var(--color-accent);
        border-top: var(--border);
        border-right: var(--border);
        transform: translate(-60%, -50%) rotate(45deg);
        transition: border-color .5s;
    }
    .staldia-view-more-link:hover .staldia-view-more-icon:before {
        border-color: var(--color-text-on-accent);
    }
}