.cb-linklist {
    .cb-linklist-text {
        position: relative;
        margin-block-end: 1rem;
    }

    .cb-linklist-items {
        position: relative;

        .cb-linklist-item {
            &:not(:last-of-type) {
                margin-bottom: 0.75rem;
                @media (min-width: 992px) {
                    margin-bottom: 1.25rem;
                }
            }

            .cb-linklist-link {
                position: relative;
                display: flex;
                padding: 0.75rem 3.25rem 0.75rem 1rem;
                @media (min-width: 992px) {
                    padding: 1.25rem 4.5rem 1.25rem 1.75rem;
                }
                font-size: var(--h5-fontsize);
                text-decoration: none;
                border-radius: var(--border-radius);
                color: var(--color-dark);
                background-color: var(--color-gray-000);
                transition: background-color .25s ease-in-out;

                &:after {
                    content: "";
                    display: block;
                    width: 18px;
                    height: 18px;
                    background: currentColor;
                    pointer-events: none;
                    position: absolute;
                    right: 0.75rem;
                    @media (min-width: 992px) {
                        right: 1.75rem;
                    }
                    top: 50%;
                    transform: translate(-10px, -50%);
                    transition: transform .25s ease-in-out;

                    mask-image: url('/typo3conf/ext/configsit/Resources/Public/Icons/arrow-right.svg');
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-size: contain; 
                }

                &.cb-linklist-link-download {
                    &:after {
                        mask-image: url('/typo3conf/ext/configsit/Resources/Public/Icons/download.svg');
                    }
                }

                &:hover, &:active, &:focus, &:focus-within {
                    background-color: var(--color-gray-100);
                    &:after {
                        transform: translate(0, -50%);
                    }
                }
                
            }
        }
    }
}

.frame-layout-4, .frame-layout-5, .frame-layout-6, .frame-layout-7, .frame-layout-8 {
    &.cb-linklist {
        .cb-linklist-items {
            .cb-linklist-item {
                .cb-linklist-link {
                    background-color: var(--color-white);
                    &:hover, &:active, &:focus, &:focus-within {
                        background-color: var(--color-gray-100);
                    }
                }
            }
        }
    }
}

.frame-layout-10 {
    &.cb-linklist {
        .cb-linklist-items {
            .cb-linklist-item {
                .cb-linklist-link {
                    background-color: var(--color-white);
                    &:hover, &:active, &:focus, &:focus-within {
                        background-color: var(--color-gray-000);
                    }
                }
            }
        }
    }
}