.Button {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: $grey-50;
    display: inline-flex;
    font-size: $font-button;
    font-weight: $normal;
    gap: 6px;
    padding: 8px 12px;

    &:hover {
        background: white;
        cursor: pointer;
        color: $grey-00;

        .icon svg {
            fill: $grey-00;
        }

        .icon.stroke svg {
            fill: none;
            stroke: $grey-00;
        }
    }

    &.destructive:hover {
        background: $error;
        color: white;

        .icon svg {
            fill: white;
        }
    }

    &.modal:hover {
        background: $grey-90;
    }

    &.modal.destructive {
        color: $error;
        
        &:hover {
            color: darken($error, 10)
        }
    }

    .icon {
        margin-top: 2px;
        
        svg {
            fill: $grey-50;
            height: 12px;
            width: 12px;
        }

        &.stroke svg {
            fill: none;
            stroke: $grey-50;
        }
    }

    &.Active {
        background: white;
    }

    &.btn-blue {
        background: $blue;
        color: #8b8b8b;

        &:hover {
            background: #4B9BE5;
            color: #233E56;
        }
    }

    &.btn-red {
        background: #fa4242;
        color: #860f0f;

        &:hover {
            background: #e91a1a;
            color: #4e1717;

            .icon {
                color: #4e1717;
            }
        }

        .icon {
            color: #860f0f;
        }
    }

    &.btn-disabled {
        background: #e0e0e0;
        color: #bababa;

        &:hover {
            background: #e0e0e0;
            color: #bababa;
        }
    }
    
    .text {
        color: inherit;
    }
}