.atm-button-primary {
    --scale: 1;

    @apply px-4 w-max;
    @apply overflow-hidden relative inline-block bg-accent-1 rounded-full cursor-pointer;
    @apply text-lg font-display font-medium text-white;

    &.no-icon {
        .button-content .atm-icon {
            @apply hidden;
        }

        .button-triangle {
            @apply block absolute -right-10;
            @apply bg-white bg-opacity-20 rounded-full top-1/2;
            @apply h-10 w-10;
            transform: translateY(-50%) scale(var(--scale));
            transition: transform 500ms ease;
        }
    }

    &.button-icon-only {
        @apply w-12 h-12 px-0 justify-center;
    }

    &.icon-right {
        @apply pr-[0.3rem];
    }

    &.icon-left {
        @apply pl-[0.3rem];
    }

    .button-content-wrapper {
        @apply relative h-12 flex justify-center items-center;
    }

    .button-content {
        @apply flex gap-3 relative z-20;

        .atm-icon {
            @apply relative w-10 flex justify-center items-center;
        }

        .atm-icon::after {
            content: '';
            @apply absolute transform top-1/2 left-1/2;
            @apply w-10 h-10 bg-white bg-opacity-20 rounded-full;
            transform: translate(-50%, -50%) scale(var(--scale));
            transition: transform 500ms ease;
        }
    }

    .button-triangle {
        @apply hidden;
    }
}