.mol-vacancy-reminder {
    @apply bg-primary text-white font-display;
    @apply fixed z-998 rounded-xl;
    @apply flex items-center gap-2 px-3 py-3 md:gap-6;

    @apply inset-x-4 bottom-4;
    @apply md:inset-x-0 md:mx-auto md:w-176 md:max-w-[calc(100%-10rem)] md:gap-6 md:px-6;

    @apply animate-fade-on-load;

    @media (prefers-reduced-motion: reduce) {
        animation: none;
    }

    .reminder-message {
        @apply hidden md:block;
    }

    /* Needs truncation on mobile, so we use a different element for that. */
    .reminder-message-mobile {
        @apply block md:hidden;
    }

    .atm-paragraph {
        @apply min-w-0 flex-1;

        p {
            @apply leading-tight mb-0;
        }
    }

    .reminder-message p {
        @apply text-md line-clamp-2;
    }

    .reminder-message-mobile {
        .reminder-title {
            @apply text-sm;
        }

        .reminder-lead,
        .reminder-title {
            @apply block truncate;
        }

        .reminder-lead {
            @apply text-xs;
        }
    }

    .reminder-actions {
        @apply flex flex-shrink-0 items-center gap-1.5 md:gap-4;
    }

    .reminder-apply {
        @apply bg-white text-secondary-col-1;

        @apply text-sm px-3 md:text-lg md:px-4;

        .button-content-wrapper {
            @apply h-10;
        }
    }

    .reminder-dismiss {
        @apply cursor-pointer whitespace-nowrap text-sm underline-offset-2 md:text-md;

        &:hover {
            @apply underline;
        }
    }
}