@use '~flux/components/css/mixin';

.remove {
    position: absolute;
    display: flex;
    top: -9px;
    right: -9px;
    height: 27px;
    width: 27px;
    align-items: center;
    justify-content: center;
    background: var(--danger-600);
    border: 3px solid var(--surface);
    border-radius: var(--radius-full);
    color: var(--danger-25);
    cursor: pointer;
    transition: 300ms var(--swift-out);
    transition-property: background, opacity, scale;

    @include mixin.hover {
        background: var(--danger-700);
    }

    &.isHidden {
        opacity: 0;
        pointer-events: none;
        scale: .5;
    }
}