.ic-action {
    display: inline-grid;
    position: relative;
    vertical-align: middle;
}

.ic-action > * {
    grid-area: 1 / 1;
}

.ic-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity 250ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 250ms cubic-bezier(0.32, 0.72, 0, 1),
        filter 250ms cubic-bezier(0.32, 0.72, 0, 1);
    transform-origin: center;
}

.ic-trigger.is-hidden {
    opacity: 0;
    transform: scale(0.95);
    filter: blur(2px);
    pointer-events: none;
}

.ic-confirm {
    position: absolute;
    align-self: center;
    justify-self: center;
    opacity: 0;
    transform: scale(0.95);
    filter: blur(2px);
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    transition:
        opacity 300ms cubic-bezier(0.2, 1, 0.2, 1),
        transform 300ms cubic-bezier(0.2, 1, 0.2, 1),
        filter 300ms cubic-bezier(0.2, 1, 0.2, 1);
    transform-origin: center;
}

.ic-confirm.is-visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    pointer-events: auto;
}

.ic-confirm.is-visible::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: currentColor;
    opacity: 0.25;
    transform-origin: left;
    animation: ic-countdown var(--ic-timeout, 3000ms) linear forwards;
    pointer-events: none;
    z-index: -1;
}

.ic-confirm.is-processing {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 200ms ease;
}

@keyframes ic-countdown {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

.fi-dropdown-list .ic-action {
    display: grid;
}

.htc-action {
    display: inline-grid;
    position: relative;
    vertical-align: middle;
}

.htc-action > * {
    grid-area: 1 / 1;
}

.htc-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    z-index: 1;
    transition:
        transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
        filter 200ms cubic-bezier(0.32, 0.72, 0, 1);
    transform-origin: center;
}

.htc-trigger.is-holding {
    transform: scale(0.96);
    filter: brightness(0.92);
}

.htc-trigger.is-processing {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.htc-trigger::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: currentColor;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
    z-index: -1;
}

.htc-trigger.is-holding::after {
    opacity: 0.3;
    animation: htc-fill var(--htc-duration, 1500ms) linear forwards;
}

@keyframes htc-fill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.fi-dropdown-list .htc-action {
    display: grid;
}

@media (prefers-reduced-motion: reduce) {
    .ic-trigger,
    .ic-confirm,
    .htc-trigger {
        transition-duration: 0ms !important;
        filter: none !important;
        transform: none !important;
    }

    .ic-confirm.is-visible::after,
    .htc-trigger.is-holding::after {
        animation: none !important;
    }

    .htc-trigger.is-holding {
        opacity: 0.7 !important;
        outline: 2px dashed currentColor !important;
        outline-offset: -2px !important;
    }
}