.link-block {
    @apply max-w-full flex items-center p-6 mb-2;
    @apply border border-solid border-gray;

    background-color: white;

    .wrapper-link-block {
        @apply w-full;

        padding-right: 16px;

        .tag {
            @apply mb-2;
        }

        .title-wrap {
            @apply flex;

            .number-id {
                @apply mr-4;
            }

            h4.heading {
                @apply font-semibold m-0;
            }
        }

        .link-block-date {
            @apply text-black-500 mt-2;
        }
    }

    .link-block-eyebrow {
        display: flex;

        & > div {
            margin-right: 8px;
        }

        &:last-child {
            margin-right: 0;
        }
    }

    .link-block-percentage {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        @screen md {
            flex-wrap: no-wrap;
        }
    }

    .link-block-percentage-text {
        width: 100%;
        margin-right: 32px;

        @screen md {
            width: auto;
        }
    }

    .link-block-percentage-number {
        @apply bg-gray-300;

        display: block;
        padding: 4px 24px;
        border-top: 1px solid #e3e3e3;
        border-bottom: 1px solid #e3e3e3;
        margin-top: 8px;

        @screen md {
            margin: 0;
        }
    }

    .link-block-record-bold {
        margin-top: 16px;
        font-weight: 700;
    }

    .link-block-actions {
        margin-top: 24px;
    }

    .link-block-eyebrow-date {
        @apply text-black-400;
        font-size: 14px;
    }

    .link-block-iconlink .icon {
        @apply text-red;
        transition: all 0.3s ease;
    }

    .link-block-type {
        @apply text-black-400 my-1;

        display: flex;

        .icon {
            align-items: flex-start;
            margin-top: 6px;
            margin-right: 8px;
        }

        .link-block-path {
            font-size: 15px;
        }
    }

    .js--clickable {
        cursor: pointer;
    }
}
.link-block.js--clickable {
    &:hover {
        @apply no-underline shadow-md;

        .link-block-iconlink .icon {
            transform: translateX(5px);
        }
    }
}