@use '../../variables' as *;

$b: '.delete-all';

#{$b} {
    align-items: center;
    color: $delete-all-color;
    cursor: pointer;
    display: inline-flex;
    text-decoration: none;
    transition-duration: var(--duration-micro-s);
    transition-property: color;
    transition-timing-function: var(--easing-standard);

    &:hover,
    &:focus-visible {
        color: $delete-all-active-color;
    }

    .action-list & {
        color: $deleta-all-action-list-color;
    }

    &__icon {
        fill: $delete-all-icon-color;
        height: 4px * 6;
        margin-right: 4px * 2;
        position: relative;
        top: -2px;
        transition-duration: var(--duration-micro-s);
        transition-property: fill;
        transition-timing-function: var(--easing-standard);
        width: 4px * 6;

        #{$b}:hover &,
        #{$b}:focus-visible & {
            fill: $delete-all-icon-active-color;
        }

        .action-list & {
            fill: $delete-all-action-list-icon-color;
        }
    }
}